/* Vellaris website design contract · tokens.css · phase 1 (2026-09-12, Fable)
 * Block 1 is the `vellaris` design-system :root pasted verbatim (binding contract; no value changed, no raw hex added elsewhere).
 * Block 2 adds semantic ROLE aliases and the dark-scene scope. Every alias resolves to a block-1 token; no new colour exists.
 * Both versions (A "Cinematic editorial", B "Playful premium") load this file unchanged. Version differences live in MOTION-CONTRACT.md, never in colour or type.
 */

/* ---------- Block 1 · design-systems/vellaris/tokens.css (verbatim) ---------- */
:root {
  --bg: #F3F0ED;
  --surface: #F3F0ED;
  --surface-warm: #E6D8CC;
  --fg: #181615;
  --fg-2: #181615;
  --muted: #655F5B;
  --meta: #655F5B;
  --border: #C9C1BB;
  --border-soft: #E6D8CC;
  --accent: #596375;
  --accent-on: #F3F0ED;
  --accent-hover: #434D5F;
  --accent-active: #414A5A;
  --success: #39776A;
  --warn: #9A671E;
  --danger: #A6403B;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-display: clamp(56px, 6.2vw, 96px);
  --leading-body: 1.65;
  --leading-display: 1.02;
  --tracking-display: -0.035em;
  --radius-sm: 4px;
  --radius: 5px;
  --radius-lg: 6px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --gutter: clamp(24px, 4.2vw, 72px);
  --content-max: 1320px;
  --header-h: 88px;
  --button-min-h: 48px;
  --shadow: none;
  --focus-ring: 2px solid #596375;
  --focus-ring-on-dark: 2px solid #F3F0ED;
  --focus-ring-on-dark-inner: 0 0 0 2px #181615;
  --focus-offset: 6px;
  --motion-fast: 180ms;
  --motion-base: 300ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Block 2 · roles, scenes, type roles (aliases only) ---------- */
:root {
  /* Scene roles: a "scene" is a page chapter with its own ground. Light is the default. */
  --scene-bg: var(--bg);
  --scene-fg: var(--fg);
  --scene-quiet: var(--muted);        /* secondary copy on light: 5.54:1 */
  --scene-line: var(--border);        /* dividers on light (decorative, not text) */
  --scene-surface-2: var(--surface-warm); /* stone: secondary surface, plates, hero backdrop */
  --scene-link: var(--accent);        /* links on light: 5.34:1 */
  --scene-ring: var(--focus-ring);
  --scene-ring-inner: none;

  /* Type roles (size only; family and weight are fixed per role in DESIGN.md §3) */
  --type-display-1: clamp(56px, 7.2vw, 104px);   /* page opening statement */
  --type-display-2: clamp(42px, 5vw, 72px);      /* chapter title */
  --type-display-3: clamp(30px, 2.6vw, 40px);    /* sub-chapter / step title */
  --type-lede: var(--text-lg);                   /* 18px lede, 1.65 */
  --type-body: var(--text-base);                 /* 16px body, 1.65 */
  --type-support: 14px;                          /* supporting copy, 1.5 */
  --type-label: var(--text-xs);                  /* 12px labels, mono where data */
  --type-display-1-mobile: clamp(40px, 11vw, 62px);
  --type-display-2-mobile: clamp(34px, 9vw, 44px);

  /* Layout roles */
  --header-h-mobile: 78px;   /* under 960px */
  --section-y: clamp(64px, 9vw, 150px);   /* 64 to 85 mobile, 100 to 150 desktop */
  --chapter-y: clamp(80px, 10vw, 150px);
  --rail-h: 96px;
  --plate-radius: var(--radius-lg);
  --control-radius: var(--radius);
}

/* Dark scene (ChairStage and any near-black chapter). Text pairs verified: canvas on ink 15.89:1, line on ink 10.16:1.
 * Not allowed on dark: --muted text (2.87:1) and --accent text (2.98:1). Filled action stays accent with canvas text (5.34:1). */
[data-scene="dark"] {
  --scene-bg: var(--fg);
  --scene-fg: var(--bg);
  --scene-quiet: var(--border);
  --scene-line: var(--muted);
  --scene-surface-2: var(--fg);
  --scene-link: var(--bg);
  --scene-ring: var(--focus-ring-on-dark);
  --scene-ring-inner: var(--focus-ring-on-dark-inner);
  color-scheme: dark;
}

/* Stone scene (secondary surfaces). Body copy on stone is ink (12.93:1), never accent text (4.34:1 fails for small text). */
[data-scene="stone"] {
  --scene-bg: var(--surface-warm);
  --scene-fg: var(--fg);
  --scene-quiet: var(--muted);      /* 4.51:1, use at 16px or larger only */
  --scene-line: var(--border);
  --scene-surface-2: var(--bg);
  --scene-link: var(--fg);
}