/* ==========================================================================
   tokens.css, DESIGN.md rendered as CSS custom properties.
   Tiers (Law §8): primitives --p-* → semantic (--bg, --text…) per [data-tone]
   → component aliases. Components must NEVER reference --p-* directly (Law X1).
   Zero dependencies. Hand-rolled. Locked by prompt.txt §7 / law #12.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Tier 1 · PRIMITIVES (raw values, DESIGN.md §1)
     ------------------------------------------------------------------ */

  /* Tone I, corporate */
  --p-paper-corp: #f8fafc;
  --p-surface-corp: #ffffff;
  --p-ink-corp: #0f172a;
  --p-mute-corp: #475569;
  --p-line-corp: #e2e8f0;
  --p-brand-corp: #1d4ed8;
  --p-brand-deep: #1e3a8a;
  --p-brand-tint: #eff4ff;
  --p-ok: #15803d;
  --p-ok-tint: #f0fdf4;
  --p-warn: #b45309;
  --p-err: #b91c1c;
  --p-err-tint: #fef2f2;

  /* Tone II, hearth (day palace) */
  --p-paper-hearth: #f7f1e5;
  --p-surface-hearth: #fdfaf3;
  --p-ink-hearth: #2b2118;
  --p-mute-hearth: #6b5942;
  --p-line-hearth: #e0d4bd;
  --p-ember: #b25a2a;
  --p-ember-deep: #8f4117;
  --p-ember-tint: #f6ead9;
  --p-leaf: #5a7251;

  /* Tone III, nightwatch (the sky) */
  --p-sky-night: #070b16;
  --p-milky: #0e1526;
  --p-star: #e8ecf8;
  --p-meteor: #97a3c0;
  --p-veil: #1b2540;
  --p-moon: #f3ecd8;
  /* SACRED (DESIGN.md Law §1.4.1): gold appears exactly once a year,
     on the anchor sentence, on the 19th (#471). Never in components. */
  --p-gold: #d8b34a;

  /* The console (Terminal page), a dark window inside the corporate day.
     Deliberately closer to nightwatch than to the office: the sky leaks. */
  --p-console-bg: #0b0f14;
  --p-console-text: #c8d3e0;
  --p-console-line: #1e293b;
  --p-console-prompt: #6ea06e;

  /* Frost on the invitation's glass, thins daily, gone in the final hour */
  --p-frost: #dbe9f6;

  /* The old-flowers letter (#letter). Paper that has been handled a great
     deal: warm cream gone slightly brown at the edges, iron-gall ink that
     has oxidised to a soft sepia, pressed petals flattened to a blush, and
     the grey-green of a stem that dried in a book. */
  --p-paper-aged: #f2e9d8;
  --p-paper-aged-edge: #e3d4b8;
  --p-ink-sepia: #4a3524;
  --p-ink-sepia-soft: #6b5340;
  --p-leaf-dry: #77754f;
  --p-petal-dry: #c2a19b;
  --p-petal-dry-deep: #a8827c;
  --p-foxing: #d9c39c;
  --p-wax: #8d4438;

  /* ------------------------------------------------------------------
     Tier 1 · TYPE (DESIGN.md §2, two typefaces, ever)
     ------------------------------------------------------------------ */
  --font-ledger: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-quill: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* 1.25 scale on the half-inch spine */
  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.9375rem;  /* 15 */
  --text-md: 1.125rem;   /* 18 */
  --text-lg: 1.4375rem;  /* 23 */
  --text-xl: 1.8125rem;  /* 29 */
  --text-2xl: 2.25rem;   /* 36 */
  --text-hero: 2.8125rem;/* 45, counts against the 3-hero-moments law */

  --leading-body: 1.55;
  --leading-head: 1.15;
  --measure: 66ch;

  /* ------------------------------------------------------------------
     Tier 1 · SPACING (DESIGN.md §3, the half-inch spine)
     ------------------------------------------------------------------ */
  --u: 0.5in;                       /* 48px. The unit. */
  --s-1: calc(var(--u) * 0.25);     /* 12px */
  --s-2: calc(var(--u) * 0.5);      /* 24px */
  --s-3: var(--u);                  /* 48px, the half-inch itself */
  --s-4: calc(var(--u) * 1.5);      /* 72px */
  --s-5: calc(var(--u) * 2);        /* 96px */
  --s-6: calc(var(--u) * 3);        /* 144px */

  --r-1: 6px;    /* corporate chrome */
  --r-2: 10px;   /* cards */
  --r-3: 14px;   /* the boarding pass */

  /* ------------------------------------------------------------------
     Tier 1 · MOTION (DESIGN.md §4, motion law & ember budget)
     ------------------------------------------------------------------ */
  --ease-sit: cubic-bezier(0.22, 1, 0.36, 1); /* the only easing */
  --t-micro: 120ms;
  --t-std: 320ms;
  --t-event: 900ms;
  --t-morph: 2500ms;

  /* Ember purse, documented for JS checkers (ember-budget.js later).
     steady-state 24 · event 60 · reduced-motion 0 */
  --ember-purse-steady: 24;
  --ember-purse-event: 60;

  /* Runtime-driven, never authored directly */
  --mouse-x: 0;
  --mouse-y: 0;
  --scroll-scrim: 1;
}

/* Registered so the invitation's frost can *melt* (interpolate) instead of snap.
   Set as --frost: 0..1 on the element by JS; transitions ride the easing law. */
@property --frost {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Registered for the parallax micro-tilt that follows the cursor.
   A tiny human warmth cue, just enough to notice it's alive. */
@property --mouse-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --mouse-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Registered so the invitation's frost can *melt* (interpolate) instead of snap.
   Set as --frost: 0..1 on the element by JS; transitions ride the easing law. */
@property --frost {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* ==========================================================================
   Tier 2 · SEMANTIC, resolved per tone.
   The Morph swaps data-tone; every component follows without a line of CSS.
   ========================================================================== */

:root,
[data-tone="corporate"] {
  --bg: var(--p-paper-corp);
  --surface: var(--p-surface-corp);
  --text: var(--p-ink-corp);
  --muted: var(--p-mute-corp);
  --line: var(--p-line-corp);
  --accent: var(--p-brand-corp);
  --accent-deep: var(--p-brand-deep);
  --accent-tint: var(--p-brand-tint);
  --on-accent: #ffffff;
  --focus: var(--p-brand-corp);
  --ok: var(--p-ok);
  --ok-tint: var(--p-ok-tint);
  --warn: var(--p-warn);
  --err: var(--p-err);
  --err-tint: var(--p-err-tint);

  --font-ui: var(--font-ledger);
  --font-voice: var(--font-ledger);
}

[data-tone="hearth"] {
  --bg: var(--p-paper-hearth);
  --surface: var(--p-surface-hearth);
  --text: var(--p-ink-hearth);
  --muted: var(--p-mute-hearth);
  --line: var(--p-line-hearth);
  --accent: var(--p-ember);
  --accent-deep: var(--p-ember-deep);
  --accent-tint: var(--p-ember-tint);
  --on-accent: #fff8f0;
  --focus: var(--p-ember);
  --ok: var(--p-leaf);
  --ok-tint: var(--p-ember-tint);
  --warn: var(--p-ember-deep);
  --err: var(--p-ember-deep);
  --err-tint: var(--p-ember-tint);

  --font-ui: var(--font-ledger);   /* chrome stays factual */
}

[data-tone="dusk"] {
  --bg: #1e1a2b;
  --surface: #2b233a;
  --text: #fbeee2;
  --muted: #b9a3b6;
  --line: #42324f;
  --accent: #e5825d;
  --accent-deep: #c35d49;
  --accent-tint: #3d263b;
  --on-accent: #1e1a2b;
  --focus: #f5b665;
  --ok: #798e6c;
  --ok-tint: #2e303b;
  --warn: #e5825d;
  --err: #b23a48;
  --err-tint: #3b232e;

  --font-ui: var(--font-ledger);
  --font-voice: var(--font-quill);
}

[data-tone="nightwatch"] {
  --bg: var(--p-sky-night);
  --surface: var(--p-milky);
  --text: var(--p-star);
  --muted: var(--p-meteor);
  --line: var(--p-veil);
  --accent: var(--p-moon);
  --accent-deep: #cfc39f;
  --accent-tint: var(--p-veil);
  --on-accent: var(--p-sky-night);
  --focus: var(--p-moon);
  --ok: var(--p-moon);
  --ok-tint: var(--p-veil);
  --warn: var(--p-moon);
  --err: var(--p-star);
  --err-tint: var(--p-veil);

  --font-ui: var(--font-ledger);
  --font-voice: var(--font-quill);
}

/* ==========================================================================
   Tier 3 · COMPONENT aliases (consume Tier 2 only)
   ========================================================================== */
:root {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-deep);
  --btn-text: var(--on-accent);
  --btn-ghost-bg: var(--surface);
  --btn-ghost-text: var(--text);
  --btn-ghost-line: var(--line);

  --card-bg: var(--surface);
  --card-line: var(--line);

  --input-bg: var(--surface);
  --input-line: var(--line);
  --input-text: var(--text);

  --link: var(--accent);
  --link-hover: var(--accent-deep);

  --nav-bg: color-mix(in srgb, var(--surface) 88%, transparent);
  --toast-bg: var(--text);
  --toast-text: var(--bg);

  --console-bg: var(--p-console-bg);
  --console-text: var(--p-console-text);
  --console-line: var(--p-console-line);
  --console-prompt: var(--p-console-prompt);
  --frost-tint: var(--p-frost);
}

/* The old-flowers palette is scoped to the letter page and nowhere else.
   The Tier 1 primitives above are inert on their own; these aliases are the
   only thing that can actually apply the aged paper, and they exist solely
   under the letter's own body flag. No other page can inherit them. */
body[data-letter-page="true"] {
  --letter-paper: var(--p-paper-aged);
  --letter-paper-edge: var(--p-paper-aged-edge);
  --letter-ink: var(--p-ink-sepia);
  --letter-ink-soft: var(--p-ink-sepia-soft);
  --letter-leaf: var(--p-leaf-dry);
  --letter-petal: var(--p-petal-dry);
  --letter-petal-deep: var(--p-petal-dry-deep);
  --letter-foxing: var(--p-foxing);
  --letter-wax: var(--p-wax);
}