/* Hallmark · tokens · Belcher Lawnscapes · v2 "The Freeze Line"
 * theme: custom · vibe: "golden-hour water, high-desert dusk, engineered — then frost"
 * The warm family was sampled from the client's own footage (assets/video/hero-film.mp4):
 *   footage shadow  #181204 → oklch(18.5% 0.029 88)   → paper family
 *   footage sun     #ef9f65 → oklch(77.0% 0.121 56)   → accent family
 *   footage sky     #4d3941 → oklch(37.0% 0.031 353)  → ember (secondary bloom)
 * v2 adds the cold axis the story was missing: frost / glacier / deep-ice, which is
 * what the page cools into as it scrolls through the freeze, and thaws out of at
 * the booking close. The two temperatures are the whole argument of the site.
 * axes: dark / didone-serif (Bodoni Moda) / chromatic-amber (~62°) ↔ chromatic-ice (~230°)
 */

:root {
  /* ── Paper (dark, tinted toward the anchor hue) ───────────────────────── */
  --color-paper:        oklch(13.0% 0.014 62);
  --color-paper-2:      oklch(16.5% 0.016 60);
  --color-paper-3:      oklch(21.0% 0.018 58);
  --color-paper-sunk:   oklch(10.0% 0.012 62);

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  --color-ink:          oklch(94.0% 0.012 70);
  --color-ink-2:        oklch(80.0% 0.013 68);
  --color-muted:        oklch(64.0% 0.015 64);
  /* NOT a text colour — 2.8:1 on paper. Shading, borders, and canvas work
     only. Anything readable uses --color-muted or lighter. */
  --color-neutral:      oklch(46.0% 0.014 60);

  /* ── Rules ────────────────────────────────────────────────────────────── */
  --color-rule:         oklch(30.0% 0.016 58);
  --color-rule-2:       oklch(23.0% 0.014 58);

  /* ── Accent — the sun off the spray ───────────────────────────────────── */
  --color-accent:       oklch(78.0% 0.150 62);
  --color-accent-dim:   oklch(64.0% 0.130 54);
  --color-accent-ink:   oklch(15.0% 0.022 58);
  --color-focus:        oklch(84.0% 0.185 66);

  /* ── Ember — the dusk sky. Blooms, alarm states, and error text. ──────── */
  --color-ember:        oklch(52.0% 0.095 8);
  --color-ember-dim:    oklch(37.0% 0.055 5);
  --color-ember-text:   oklch(74.0% 0.115 14);

  /* ── Frost — the cold axis. Text-grade frost clears 4.5:1 on paper. ───── */
  --color-frost:        oklch(93.0% 0.030 220);
  --color-frost-text:   oklch(84.0% 0.060 225);
  --color-glacier:      oklch(72.0% 0.095 235);
  --color-ice-deep:     oklch(42.0% 0.085 245);
  --color-ice-ink:      oklch(14.0% 0.030 240);

  /* Canvas-only state vocabulary (kept for the freeze / coverage rigs).
     Literal values, not var() references: the rigs read these with
     getPropertyValue and hand them to canvas, which cannot resolve var(). */
  --color-state-freeze: oklch(72.0% 0.095 235);
  --color-state-freeze-deep: oklch(42.0% 0.085 245);

  /* ── Thermal: 1 = golden hour, 0 = hard freeze. Driven by scroll in
        js/ui.js; every "temperature-aware" surface reads it. ──────────── */
  --temp: 1;
  /* oklab, not oklch: a hue-rotating mix would walk amber → ice through green */
  --color-thermal: color-mix(in oklab, var(--color-glacier) calc((1 - var(--temp)) * 100%), var(--color-accent));
  --color-thermal-bloom: color-mix(in oklab, var(--color-ice-deep) calc((1 - var(--temp)) * 100%), var(--color-ember));

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: "Bodoni Moda", "Bodoni 72", "Didot", "Iowan Old Style", Georgia, serif;
  --font-body:    "Instrument Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Martian Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.3125rem;
  --text-2xl:  1.625rem;
  --text-3xl:  2.125rem;
  --text-4xl:  2.75rem;
  --text-display-s:  clamp(2.4rem, 1.4rem + 3.8vw, 4.25rem);
  --text-display:    clamp(2.9rem, 1.2rem + 6.8vw, 6.8rem);
  --text-display-xl: clamp(3.4rem, 0.9rem + 9.8vw, 9.5rem);

  --leading-tight: 0.96;
  --leading-snug:  1.12;
  --leading-body:  1.62;
  --tracking-tight: -0.018em;
  --tracking-wide:  0.16em;

  /* ── Space — 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: 5rem;
  --space-4xl: 8rem;
  --space-5xl: 12rem;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:     cubic-bezier(0.70, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-short: 140ms;
  --dur-mid:   260ms;
  --dur-long:  440ms;
  --dur-slow:  900ms;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;
  --rule-hair:  1px;
  --rule-thick: 3px;

  /* ── Elevation (z) ────────────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  20;
  --z-nav:     30;
  --z-overlay: 40;
  --z-modal:   50;

  /* ── Measure ──────────────────────────────────────────────────────────── */
  --measure:       66ch;
  --measure-tight: 46ch;
  --shell:         80rem;
  --shell-wide:    94rem;

  /* ── Pointer (set by js/ui.js; used by the spotlight borders) ─────────── */
  --mx: 50vw;
  --my: 50vh;
}