@import url("./theme-palettes.css");

:root {
  /* Palette derivation */
  --tone-paper: light-dark(white, black);
  --tone-ink: light-dark(black, white);
  --tone-raise: light-dark(white, var(--c-text));
  --tone-shadow: light-dark(var(--c-text), black);

  --c-surface: light-dark(
    color-mix(in srgb, var(--c-bg) 72%, white 28%),
    color-mix(in srgb, var(--c-bg) 94%, var(--c-text) 6%)
  );
  --c-text-weak: light-dark(
    color-mix(in srgb, var(--c-text) 66%, var(--c-bg) 34%),
    color-mix(in srgb, var(--c-text) 72%, var(--c-bg) 28%)
  );
  --c-border: light-dark(
    color-mix(in srgb, var(--c-text) 38%, var(--c-bg) 62%),
    color-mix(in srgb, var(--c-text) 18%, var(--c-bg) 82%)
  );
  --c-shadow: color-mix(in srgb, var(--tone-shadow) 16%, transparent 84%);
  --c-overlay: color-mix(in srgb, var(--c-surface) 72%, transparent 28%);

  /* Shared UI tokens */
  --ui-bg: var(--c-bg);
  --ui-page-bg: color-mix(in srgb, var(--c-bg) 88%, var(--c-surface) 12%);
  --ui-phone-frame-page-bg: light-dark(
    color-mix(in srgb, var(--c-bg) 82%, white 18%),
    color-mix(in srgb, var(--c-bg) 90%, var(--c-surface) 10%)
  );
  --ui-bg-elevated: light-dark(
    color-mix(in srgb, var(--c-bg) 85%, var(--c-surface) 15%),
    color-mix(in srgb, var(--c-bg) 74%, var(--c-surface) 26%)
  );
  --ui-bg-gradient-end: color-mix(in srgb, var(--c-bg) 75%, var(--tone-ink) 25%);
  --ui-surface: var(--c-surface);
  --ui-surface-strong: color-mix(in srgb, var(--c-surface) 88%, var(--tone-ink) 12%);
  --ui-surface-control: color-mix(in srgb, var(--c-surface) 85%, var(--tone-ink) 15%);
  --ui-surface-input: light-dark(
    color-mix(in srgb, var(--c-surface) 70%, white 30%),
    color-mix(in srgb, var(--c-surface) 94%, var(--c-text) 6%)
  );
  --ui-surface-muted: color-mix(in srgb, var(--c-surface) 70%, var(--c-bg) 30%);
  --ui-text: var(--c-text);
  --ui-text-muted: var(--c-text-weak);
  --ui-text-soft: color-mix(in srgb, var(--c-text) 90%, var(--c-text-weak) 10%);
  --ui-text-faint: color-mix(in srgb, var(--c-text-weak) 75%, var(--c-bg) 25%);
  --ui-text-inverse: var(--c-bg);
  --ui-border: var(--c-border);
  --ui-border-strong: color-mix(in srgb, var(--c-border) 78%, var(--tone-raise) 22%);
  --ui-accent: var(--c-accent);
  --ui-accent-strong: color-mix(in srgb, var(--c-accent) 84%, var(--tone-ink) 16%);
  --ui-accent-warm: color-mix(in srgb, var(--c-accent) 86%, var(--c-secondary) 14%);
  --ui-accent-cool: color-mix(in srgb, var(--c-accent) 70%, var(--c-text) 30%);
  --ui-secondary: var(--c-secondary);
  --ui-secondary-strong: color-mix(in srgb, var(--c-secondary) 70%, var(--c-accent) 30%);
  --ui-secondary-soft: color-mix(in srgb, var(--c-secondary) 16%, transparent 84%);
  --ui-danger: var(--c-danger);
  --ui-focus-ring: color-mix(in srgb, var(--c-accent) 85%, transparent 15%);
  --ui-shadow-color-soft: color-mix(in srgb, var(--c-shadow) 82%, transparent 18%);
  --ui-shadow-color-strong: var(--c-shadow);
  --ui-shadow-soft: 0 10px 24px var(--ui-shadow-color-soft);
  --ui-shadow-strong: 0 24px 60px var(--ui-shadow-color-strong);
  --ui-glow-accent-subtle: color-mix(in srgb, var(--c-accent) 92%, transparent 8%);
  --ui-glow-accent: color-mix(in srgb, var(--c-accent) 84%, transparent 16%);
  --ui-glow-cool: color-mix(in srgb, var(--ui-accent-strong) 84%, var(--tone-raise) 16%);
  --ui-overlay-backdrop: color-mix(in srgb, var(--c-overlay) 100%, transparent 0%);
  --ui-overlay-panel: color-mix(in srgb, var(--c-overlay) 80%, var(--c-bg) 20%);
  --ui-overlay-card: linear-gradient(180deg, color-mix(in srgb, var(--c-overlay) 60%, var(--tone-ink) 40%) 0%, var(--ui-overlay-panel) 100%);
  --ui-welcome-card: linear-gradient(135deg, color-mix(in srgb, var(--c-bg) 70%, var(--c-surface) 30%) 0%, color-mix(in srgb, var(--c-surface) 60%, var(--tone-ink) 40%) 100%);

  /* Reusable controls and screen chrome */
  --ui-stage-bg: light-dark(
    color-mix(in srgb, var(--c-bg) 72%, var(--c-surface) 28%),
    color-mix(in srgb, var(--c-bg) 45%, var(--c-surface) 55%)
  );
  --ui-stage-highlight: light-dark(
    color-mix(in srgb, var(--ui-stage-bg) 86%, white 14%),
    color-mix(in srgb, var(--ui-stage-bg) 94%, var(--c-text) 6%)
  );
  --ui-control-bg: light-dark(
    color-mix(in srgb, var(--c-surface) 70%, white 30%),
    var(--c-surface)
  );
  --ui-control-active-bg: light-dark(
    color-mix(in srgb, var(--c-surface) 52%, white 48%),
    color-mix(in srgb, var(--c-surface) 96%, var(--c-text) 4%)
  );
  --ui-control-muted-bg: color-mix(in srgb, var(--ui-control-bg) 72%, transparent 28%);
  --ui-control-line: color-mix(in srgb, var(--ui-text) 10%, transparent 90%);
  --ui-control-line-strong: color-mix(in srgb, var(--ui-text) 16%, transparent 84%);
  --ui-control-shadow-color: light-dark(
    color-mix(in srgb, var(--ui-shadow-color-soft) 55%, transparent 45%),
    color-mix(in srgb, black 18%, transparent 82%)
  );
  --ui-control-shadow-color-soft: light-dark(
    color-mix(in srgb, var(--ui-shadow-color-soft) 48%, transparent 52%),
    color-mix(in srgb, black 18%, transparent 82%)
  );
  --ui-control-shadow: 0 10px 22px var(--ui-control-shadow-color);
  --ui-control-shadow-soft: 0 7px 18px var(--ui-control-shadow-color-soft);
  --ui-stage-shadow: 0 14px 32px light-dark(
    color-mix(in srgb, var(--ui-shadow-color-soft) 52%, transparent 48%),
    color-mix(in srgb, black 20%, transparent 80%)
  );
  --ui-phone-frame-shadow: 0 18px 42px color-mix(in srgb, var(--ui-shadow-color-soft) 55%, transparent 45%);
  --ui-inset-border: color-mix(in srgb, white 12%, transparent 88%);
  --ui-inset-border-strong: color-mix(in srgb, white 18%, transparent 82%);
  --ui-inset-border-hover: color-mix(in srgb, white 22%, transparent 78%);
  --ui-translucent-surface: color-mix(in srgb, white 4%, transparent 96%);
  --ui-translucent-surface-hover: color-mix(in srgb, white 8%, transparent 92%);

  --ui-chip-bg: color-mix(in srgb, var(--c-accent) 14%, transparent 86%);
  --ui-chip-bg-hover: color-mix(in srgb, var(--c-accent) 20%, transparent 80%);
  --ui-chip-bg-subtle: color-mix(in srgb, var(--c-accent) 10%, transparent 90%);
  --ui-chip-bg-strong: color-mix(in srgb, var(--c-accent) 24%, transparent 76%);
  --ui-chip-border: color-mix(in srgb, var(--c-accent) 28%, transparent 72%);
  --ui-chip-border-hover: color-mix(in srgb, var(--c-accent) 34%, transparent 66%);
  --ui-chip-border-strong: color-mix(in srgb, var(--c-accent) 40%, transparent 60%);
  --ui-field-focus: color-mix(in srgb, var(--ui-focus-ring) 16%, transparent 84%);
  --ui-danger-bg: color-mix(in srgb, var(--c-danger) 14%, transparent 86%);
  --ui-danger-bg-hover: color-mix(in srgb, var(--c-danger) 20%, transparent 80%);
  --ui-danger-bg-soft: color-mix(in srgb, var(--c-danger) 10%, transparent 90%);
  --ui-danger-border: color-mix(in srgb, var(--c-danger) 28%, transparent 72%);
  --ui-danger-border-hover: color-mix(in srgb, var(--c-danger) 36%, transparent 64%);
  --ui-danger-text: color-mix(in srgb, var(--c-danger) 80%, var(--c-text) 20%);
  --ui-warning-bg: var(--c-secondary);
  --ui-warning-bg-hover: color-mix(in srgb, var(--c-secondary) 84%, var(--c-accent) 16%);
  --ui-warning-border: color-mix(in srgb, var(--c-accent) 42%, var(--c-secondary) 58%);
  --ui-warning-border-hover: color-mix(in srgb, var(--c-accent) 56%, var(--c-secondary) 44%);
  --ui-warning-text: var(--c-accent);
  --ui-white-border: var(--ui-inset-border);
  --ui-white-border-hover: var(--ui-inset-border-hover);
  --ui-white-surface: var(--ui-translucent-surface);
  --ui-white-surface-hover: var(--ui-translucent-surface-hover);
  --ui-text-decoration: color-mix(in srgb, var(--c-text) 18%, transparent 82%);
  --ui-text-decoration-hover: color-mix(in srgb, var(--c-text) 45%, transparent 55%);

  --key-white-text: color-mix(in srgb, var(--ui-accent-cool) 58%, var(--c-text) 42%);
  --key-white-selected-text: color-mix(in srgb, var(--ui-accent-cool) 70%, var(--c-text) 30%);
  --key-white-bg: linear-gradient(180deg, color-mix(in srgb, white 98%, var(--c-secondary) 2%), color-mix(in srgb, var(--c-secondary) 42%, white 58%));
  --key-white-selected-bg: linear-gradient(180deg, color-mix(in srgb, var(--c-secondary) 88%, white 12%), var(--c-secondary));
  --key-black-text: color-mix(in srgb, white 96%, var(--c-secondary) 4%);
  --key-black-bg: linear-gradient(180deg, color-mix(in srgb, var(--c-text) 72%, var(--c-bg) 28%), color-mix(in srgb, black 78%, var(--c-bg) 22%));
  --key-black-selected-bg: linear-gradient(180deg, var(--c-accent), var(--ui-accent-strong));
}

.app-back-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  color: var(--ui-accent);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.app-back-button:focus,
.app-back-button:focus-visible,
.app-back-button:active {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.app-back-button span {
  width: 17px;
  height: 17px;
  display: block;
  margin-left: 5px;
  transform: rotate(45deg);
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.app-back-button-floating {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  left: max(0px, env(safe-area-inset-left));
  z-index: 10;
  margin: 0;
}