/* Hallmark · tokens · project: WaySide 伴行
 * macrostructure: Workbench · theme: custom (dark-technical)
 * axes: paper-band dark / display-style grotesk-sans / accent-hue cool (250)
 * Every colour + font in site.css resolves through one of these tokens. No inline values.
 */

:root {
  /* ── colour ─────────────────────────────────────────────────────── */
  /* paper band: dark (L 13.5–21 %), all ticks on the 255 anchor hue */
  --color-paper-top:    oklch(17%   0.018 255);
  --color-paper:        oklch(13.5% 0.014 255);
  --color-paper-2:      oklch(17%   0.016 255);
  --color-paper-3:      oklch(21%   0.018 255);
  --color-paper-veil:   oklch(17%   0.016 255 / 0.78);

  --color-rule:         oklch(30%   0.015 255);
  --color-rule-soft:    oklch(22%   0.012 255);
  --color-neutral:      oklch(63%   0.012 255);
  --color-muted:        oklch(80%   0.010 255);
  --color-ink:          oklch(96.5% 0.006 250);

  /* accent = the brand blue lifted for a dark surface. Used as a
     highlighter only — links, focus rings, marks, hover fill. */
  --color-accent:       oklch(70%   0.155 250);
  --color-accent-deep:  oklch(58%   0.140 252);
  --color-on-accent:    oklch(15%   0.020 255);
  --color-focus:        oklch(81%   0.145 250);

  /* ── type ───────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "HarmonyOS Sans SC", "PingFang SC",
                  "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", "HarmonyOS Sans SC",
                  "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas,
                  "Liberation Mono", monospace;

  --text-2xs:       0.6875rem;
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-md:        1rem;
  --text-lg:        1.125rem;
  --text-xl:        clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:       clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-hero:      clamp(1.5rem, 0.8rem + 4vw, 4rem);
  --text-statement: clamp(1.25rem, 0.95rem + 1.5vw, 1.875rem);
  --text-footer:    clamp(1.5rem, 1rem + 2.4vw, 2.75rem);

  /* ── space · 4 pt scale ─────────────────────────────────────────── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ── layout ─────────────────────────────────────────────────────── */
  --container:   74rem;
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --rule-w:      1px;
  --measure-tight: 30em;
  --measure-body:  36em;
  --measure-wide:  44em;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* ── motion ─────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant:  90ms;
  --dur-short:    160ms;
  --dur-mid:      280ms;
  --dur-long:     520ms;

  /* ── z-index · six named levels ─────────────────────────────────── */
  --z-base:    0;
  --z-raise:   10;
  --z-sticky:  20;
  --z-overlay: 30;
  --z-modal:   40;
  --z-toast:   50;
}