/* Hallmark · route: custom (bespoke) · structure: object stage (one piece held still while the rooms change), hour-rail nav, local-time close
 * idea: "the hands are the scroll: they settle on your own hour" (and the screen in the dial shows it)
 * object: Robyn's design (build/raw/watch-design.png), black titanium + copper + blue light; the page keeps its warm ground and one accent"
 * paper: oklch(15.5% 0.014 62) umber · accent: oklch(80% 0.1 82) aged gold
 * display: Bodoni Moda · body: Hanken Grotesk
 * axes: dark / high-contrast-serif / warm · differs from lumvale (dark / grotesk-sans / cool) on display + accent,
 *       from summit (light / geometric-sans / warm) on paper + display
 * pre-emit critique: P5 H4 E4 S5 R5 V5
 */
:root {
  /* umber ground: the workshop with the lights low */
  --color-ground:     oklch(15.5% 0.014 62);
  --color-ground-2:   oklch(20% 0.018 62);
  --color-ink:        oklch(95% 0.018 85);
  --color-ink-soft:   oklch(89% 0.022 80);
  --color-ink-dim:    oklch(74% 0.026 78);
  --color-rule:       oklch(95% 0.018 85 / 0.3);
  --color-rule-strong:oklch(95% 0.018 85 / 0.62);
  /* one hue, aged gold */
  --color-accent:       oklch(80% 0.1 82);
  --color-accent-hover: oklch(86% 0.09 84);
  --color-accent-ink:   oklch(17% 0.02 62);
  --color-focus:        oklch(84% 0.1 82);
  /* scrims and the doorway between rooms */
  --color-scrim:      oklch(12% 0.014 60 / 0.82);
  --color-scrim-soft: oklch(12% 0.014 60 / 0.5);
  --color-scrim-deep: oklch(11% 0.014 60 / 0.9);
  --color-door:       oklch(9% 0.01 60);
  --color-shadow:     oklch(6% 0.01 60 / 0.55);
  /* the watch, after Robyn's design: black titanium, copper, lume, a blue screen and
     bezel light, amber arcs. Painted live on canvases, so every one must exist
     (a missing token aborts the canvas draw). */
  --color-dial:        oklch(13% 0.004 260);
  --color-dial-hi:     oklch(18.5% 0.008 260);
  --color-tick:        oklch(93% 0.006 250);
  --color-tick-dim:    oklch(42% 0.01 255);
  --color-copper:      oklch(73% 0.085 55);
  --color-lume:        oklch(95% 0.028 88);
  --color-amber:       oklch(80% 0.15 68);
  --color-amber-glow:  oklch(70% 0.17 55 / 0.4);
  --color-lcd-ground:  oklch(13% 0.03 258);
  --color-lcd-ink:     oklch(91% 0.07 232);
  --color-lcd-ghost:   oklch(91% 0.07 232 / 0.07);
  --color-lcd-glow:    oklch(72% 0.15 245);
  --color-led:         oklch(97% 0.025 262);
  --color-led-glow:    oklch(60% 0.21 268 / 0.55);
  --color-circuit:     oklch(66% 0.15 242);
  --color-circuit-glow:oklch(56% 0.17 250 / 0.28);
  --color-pcb:         oklch(17% 0.045 252);
  --color-rubber:      oklch(15% 0.003 260);
  --color-rubber-hi:   oklch(23% 0.004 260);
  /* the light the case reflects */
  --color-env-sky:    oklch(98% 0.025 82 / 1);
  --color-env-fill:   oklch(90% 0.035 80 / 0.42);
  --color-env-shade:  oklch(8% 0.01 60 / 0.45);
  --color-env-fade:   oklch(96% 0.03 80 / 0);
  --color-env-strip:  oklch(94% 0.03 80 / 0.75);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --gutter: clamp(1rem, 4.2vw, 4rem);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --text-title: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --text-display: clamp(2.75rem, 1rem + 7.4vw, 8.5rem);

  --track-caps: 0.22em;
  --track-display: 0.16em;
  --measure: 30rem;
  --rule: 1px;
  --radius: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;

  /* scroll-craft engine tokens */
  --sc-canvas: var(--color-ground);
  --sc-surface: var(--color-ground-2);
  --sc-ink: var(--color-ink);
  --sc-ink-soft: var(--color-ink-soft);
  --sc-accent: var(--color-accent);
  --sc-accent-ink: var(--color-accent-ink);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-body);
}
