/* Design tokens.
 *
 * Raw values live here and nowhere else. Components read the semantic names,
 * so a palette, theme or scale change is an edit to this file only.
 *
 * Every text/background pair below was measured against WCAG 2.2 AA (light /
 * dark): text 16.0/16.5:1, text-2 8.3/10.8:1, text-3 5.7/7.6:1 on the page;
 * control borders at least 3.4:1; stage text 17.2:1, stage text-2 9.7:1; ink
 * on saffron 9.8:1; saffron on the stage 10.4:1; recording red on the stage
 * 6.8:1. Saffron is never text or a thin line on a light surface (1.6:1).
 *
 * The prefixes (--color-, --stage-, --fs-, --sp-, --r-, ...) differ from the
 * legacy layer's names on purpose: that layer defines --text, --primary,
 * --space-* and the like, and a shared name would silently restyle its rules.
 */

@layer tokens {
  :root {
    color-scheme: light;

    /* Page */
    --color-page: #f4f3ef;
    --color-surface: #ffffff;
    --color-sunken: #e8e6e0;
    --color-text: #17181b;
    --color-text-2: #45484f;
    --color-text-3: #5c6068;
    --color-line: #dad7cf;
    --color-control: #80838a;
    --color-error: #c4321f;
    --color-selected-bg: #17181b;
    --color-selected-fg: #ffffff;
    --color-primary: #17181b;
    --color-on-primary: #ffffff;
    --color-focus: #17181b;

    /* Stage: always dark, whatever the page theme. */
    --stage-bg: #101113;
    --stage-raised: #1b1c1f;
    --stage-line: rgb(255 255 255 / 0.16);
    --stage-text: #f5f4f0;
    --stage-text-2: #b8babf;
    --stage-plate: rgb(16 17 19 / 0.92);
    --stage-bar-off: rgb(255 255 255 / 0.22);
    /* Under every landmark stroke, so the skeleton reads on any background. */
    --stage-halo: rgba(0, 0, 0, 0.55);
    --stage-rec: #ff6b5e;
    --stage-on-rec: #17181b;
    --stage-lock: #f2b705;
    --stage-button: #f2b705;
    --stage-on-button: #17181b;

    /* QR code: black on white in both themes. A scanner needs dark on light
       whatever the page looks like, so these are not part of the dark set
       below. The drawing in js/ui/qr.js reads them. */
    --qr-ink: #17181b;
    --qr-back: #ffffff;

    /* Brand mark: ink tile, saffron trace. */
    --brand-tile: #17181b;
    --brand-trace: #f2b705;
    --brand-caret: #f3f2ee;
    --brand-edge: transparent;

    /* Type. Sizes are rem so the reader's own text size setting applies. */
    --font-ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --fs-xs: 0.8125rem;   /* 13 */
    --fs-sm: 0.9375rem;   /* 15 */
    --fs-md: 1rem;        /* 16 */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: 1.625rem;    /* 26 */
    --fs-2xl: 1.875rem;   /* 30 */
    --fs-level: 1.125rem; /* 18: the confidence word on the caption plate */
    --fs-word: 2.5rem;    /* 40 */
    --fs-glyph: 4.75rem;  /* 76 */
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-body: 1.5;

    /* Space: a 4 px scale. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* Shape */
    --r-s: 6px;
    --r-m: 10px;
    --r-strip: 12px;
    --r-l: 16px;
    --r-stage: 0px;
    --r-pill: 999px;

    /* Size */
    --size-target: 44px;
    --size-control: 48px;
    --size-icon: 22px;
    --size-topbar: 60px;
    --size-ring: 104px;
    --size-side: 360px;
    /* Stage content starting this far down clears the chip: its 12 px
       inset, 32 px height and a gap. */
    --size-stage-clear: 3.25rem;
    /* What the message line takes at the stage's bottom edge: two lines,
       its padding and its margin. */
    --size-stage-message: 4.5rem;

    /* Elevation: floating things only; cards use a hairline, never both. */
    --elev-float: 0 8px 24px rgb(0 0 0 / 0.18);

    /* Motion: explains a state change, never decorates. */
    --dur-1: 120ms;
    --dur-2: 200ms;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Stacking, lowest first. */
    --z-stage-hud: 2;
    --z-stage-plate: 3;
    --z-topbar: 50;
    --z-popover: 60;
    --z-toast: 70;
    --z-lightbox: 100;
  }

  /* One dark set, on the root element. js/core/theme-boot.js writes
     data-theme there before these stylesheets apply, so the first frame is
     already in the visitor's theme and the canvas behind an overscroll
     matches the page. There is deliberately no prefers-color-scheme copy of
     this block for a page where that script did not run: it would be a second
     set to keep in step, and the app cannot start without the script (init()
     uses its functions and reports a start-up failure). */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --color-page: #131416;
    --color-surface: #1c1d21;
    --color-sunken: #0e0f11;
    --color-text: #f3f2ee;
    --color-text-2: #c4c6cb;
    --color-text-3: #a3a6ad;
    --color-line: #2d2f34;
    --color-control: #71747b;
    --color-error: #ff8a7a;
    --color-selected-bg: #f3f2ee;
    --color-selected-fg: #17181b;
    --color-primary: #f2b705;
    --color-on-primary: #17181b;
    --color-focus: #f2b705;
    --brand-edge: #2d2f34;
  }

  /* The narrowest phones: a smaller first-visit headline. */
  @media (max-width: 22.5rem) {
    :root { --fs-2xl: 1.5rem; }
  }

  /* Phone landscape: the stage on the left, a column of fixed parts on the
     right. The ring steps down with the height (88, 76 and 64 px), so the
     column fits 390, 360 and 320 px. */
  @media (orientation: landscape) and (max-height: 32rem) and (max-width: 63.99rem) {
    :root {
      --size-land-side: clamp(16.5rem, 36vw, 19rem);
      --size-land-switch: 3.25rem; /* 44 px tabs in the switch's 4 px padding */
      --size-land-strip: 52px;
      --size-control: 44px;
      --size-ring: 88px;
      --fs-glyph: 4rem;     /* 64 */
      --fs-word: 2rem;      /* 32 */
    }
  }
  @media (orientation: landscape) and (max-height: 23rem) and (max-width: 63.99rem) {
    :root { --size-ring: 76px; --fs-glyph: 3.25rem; --size-land-strip: 48px; }
  }
  /* The shortest (568x320, 640x320): the switch drops its padding. */
  @media (orientation: landscape) and (max-height: 21.25rem) and (max-width: 63.99rem) {
    :root {
      --size-land-switch: 3rem;
      --size-ring: 64px;
      --fs-glyph: 2.75rem;  /* 44 */
      --fs-word: 1.75rem;   /* 28 */
    }
  }

  /* Laptop and up: a denser control size and a larger display scale. */
  @media (min-width: 64rem) {
    :root {
      --fs-sm: 0.875rem;  /* 14 */
      --fs-md: 0.9375rem; /* 15 */
      --fs-2xl: 2.375rem; /* 38 */
      --fs-level: 1.375rem; /* 22 */
      --fs-word: 3.25rem; /* 52 */
      --fs-glyph: 5.25rem; /* 84: the ring is 112 so a raised hand clears the plate (see layout.css) */
      --r-stage: 20px;
      --size-control: 44px;
      --size-icon: 20px;
      --size-topbar: 64px;
      --size-ring: 112px;
    }
  }
}