/* ---------------------------------------------------------------------------
 * tokens-local.css — site-only tokens. HAND-AUTHORED.
 *
 * Loads AFTER assets/css/tokens.css (the generated brand snapshot) so every
 * declaration here may reference the brand primitives that snapshot defines.
 *
 * WHAT BELONGS HERE
 * Only tokens the shared design system does not own. If a value exists
 * upstream, consume it from the snapshot — do NOT restate it here. Restating
 * upstream values is exactly the fork that let this site serve the retired
 * vermilion accent for five weeks after the 2026-07-09 rebrand.
 *
 * WHAT IS HERE, AND WHY
 * 1. Editorial type register — DM Serif Display / DM Serif Text / DM Sans /
 *    Kanit and their composed text styles. Deliberate local addition per
 *    decisions/decisions.md 2026-06-03 (Digital case-study register). The brand
 *    system has no serif face. Several steps are not consumed yet: the ADR
 *    scopes the register to all five Digital case studies and only one is
 *    built, so they are reserved, not dead.
 * 2. Illustration aliases — non---sc- names the Three.js scenes read via
 *    getComputedStyle (assets/js/woodworking-viewer.js, work/index.html).
 *    Each points at its closest brand equivalent.
 *
 * Created 2026-08-17 when tokens.css became a generated snapshot.
 * ------------------------------------------------------------------------- */

:root {
  /* ===== Editorial families — local addition 2026-06-03 =====
   * Not on brand.shokunincrafthouse.com; local until the brand system carries a
   * serif. Loaded from Google Fonts on the Digital case-study pages. */
  --sc-p-font-family-serif-display: "DM Serif Display", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sc-p-font-family-sans-reading:  "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --sc-p-font-family-condensed:     "Kanit", "Arial Narrow", system-ui, sans-serif;
  --sc-p-font-family-serif-text:    "DM Serif Text", "Hoefler Text", Georgia, "Times New Roman", serif;

  /* ===== Semantic typography: editorial register =====
   * Digital case-study pages only. Serif display (DM Serif Display, single weight,
   * heft is intrinsic) + DM Sans reading body. Sizes bind to existing primitives
   * (nearest-token mapping, no new size values). Local addition 2026-06-03. */
  --sc-font-text-editorial-hero-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-hero-size:           var(--sc-p-font-size-60);
  --sc-font-text-editorial-hero-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-hero-line-height:    var(--sc-p-font-line-height-tight);
  --sc-font-text-editorial-hero-letter-spacing: var(--sc-p-font-tracking-tight);

  --sc-font-text-editorial-section-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-section-size:           var(--sc-p-font-size-32);
  --sc-font-text-editorial-section-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-section-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-section-letter-spacing: var(--sc-p-font-tracking-snug);

  --sc-font-text-editorial-title-family:         var(--sc-p-font-family-serif-display);
  --sc-font-text-editorial-title-size:           var(--sc-p-font-size-24);
  --sc-font-text-editorial-title-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-title-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-title-letter-spacing: var(--sc-p-font-tracking-snug);

  --sc-font-text-reading-body-family:         var(--sc-p-font-family-sans-reading);
  --sc-font-text-reading-body-size:           var(--sc-p-font-size-16);
  --sc-font-text-reading-body-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-reading-body-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-reading-body-letter-spacing: var(--sc-p-font-tracking-normal);

  /* Editorial pull-quote — DM Serif Text (italic set in component CSS). Local addition 2026-06-05. */
  --sc-font-text-editorial-quote-family:         var(--sc-p-font-family-serif-text);
  --sc-font-text-editorial-quote-size:           var(--sc-p-font-size-24);
  --sc-font-text-editorial-quote-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-editorial-quote-line-height:    var(--sc-p-font-line-height-snug);
  --sc-font-text-editorial-quote-letter-spacing: var(--sc-p-font-tracking-tight);

  --sc-font-text-reading-lead-family:         var(--sc-p-font-family-sans-reading);
  --sc-font-text-reading-lead-size:           var(--sc-p-font-size-20);
  --sc-font-text-reading-lead-weight:         var(--sc-p-font-weight-regular);
  --sc-font-text-reading-lead-line-height:    var(--sc-p-font-line-height-relaxed);
  --sc-font-text-reading-lead-letter-spacing: var(--sc-p-font-tracking-normal);


  /* ===== Homepage intro motion — local addition 2026-09-10 (Sprint 7) =====
   * The authored beat of the "SC Intro III" sequence. Read by assets/js/intro.js
   * via getComputedStyle, so the timeline carries no literal values.
   * Consumed from upstream where an exact equivalent exists:
   *   reveal easing = --sc-p-motion-easing-out (0.22, 1, 0.36, 1) — identical.
   * TOKEN GAP (flagged for the brand system): the remaining durations, the two
   * curves below, and the spin/scale amounts have no upstream primitive. The
   * land (600ms) and iris (750ms) beats sit inside the Cinematic orchestrated
   * band (600–900ms); the stroke beats are sub-micro by design and no upstream
   * duration is that short. Suggested upstream names:
   *   --sc-p-motion-easing-settle, --sc-p-motion-easing-land,
   *   --sc-p-motion-duration-orchestrated-short (600ms). */
  --sc-motion-intro-stroke-fade:   120ms;   /* each plus fades up faster than it lands */
  --sc-motion-intro-beat:          90ms;    /* between stroke starts — strokes overlap like handwriting */
  --sc-motion-intro-breath:        120ms;   /* pause between finishing the S and starting the C */
  --sc-motion-intro-land:          600ms;   /* one plus spinning into rest */
  --sc-motion-intro-iris-lead:     450ms;   /* iris opens this long after the last stroke starts */
  --sc-motion-intro-iris:          750ms;   /* the plus-iris wipe */
  --sc-motion-intro-spin:          270;     /* degrees of visible spin on entry */
  --sc-motion-intro-scale-from:    0.4;     /* a plus starts at this scale */
  --sc-motion-intro-easing-reveal: var(--sc-p-motion-easing-out);
  --sc-motion-intro-easing-settle: cubic-bezier(0.83, 0, 0.17, 1);
  --sc-motion-intro-easing-land:   cubic-bezier(0.34, 1.42, 0.42, 1);
  --sc-size-intro-stage:           min(48vmin, 440px); /* stage width; the lockup is 4×3 cells inside it */

  /* ===== Homepage letter board — local addition 2026-09-24 (Sprint 9) =====
   * Read by assets/js/board.js via getComputedStyle at mount, so the scene and
   * its timeline carry no literal colour, ms or curve.
   * Consumed from upstream where an equivalent exists: the roll reads
   * --sc-motion-entrance-* (in) and --sc-motion-cut-* (out); the rail reads
   * --sc-color-surface-inverse; the glyph reads --sc-color-text-primary.
   *
   * TOKEN GAP (flagged for the brand system): SCDS carries no wood hue — its
   * warm-gray ramp runs #FBF9F6 to #0D0C0B with no chroma — so the tile grain
   * paints from this local ramp (owner direction, decisions.md 2026-09-17).
   * Suggested upstream names: --sc-p-color-wood-100 (light), -200 (base),
   * -400 (ring), -500 (knot).
   * Contrast floor: the glyph ink (text-primary, warm-gray-800) must hold
   * 4.5:1 against every grain pixel, so the darkest value here (ring, knot)
   * keeps relative luminance ≥ 0.22. board-verify.py measures it. */
  --sc-board-wood-light: #DBCEBC;
  --sc-board-wood-base:  #BEB09D;
  --sc-board-wood-ring:  #A39482;
  --sc-board-wood-knot:  #9B8B79;
  /* Per-tile tints (owner review 2026-09-24): each tile leans a little warm
   * (honey) or cool (ash) so no two read as the same board. Both sit far
   * above the contrast floor (7.89:1 and 9.09:1 against the ink).
   * Suggested upstream names: --sc-p-color-wood-tint-warm, -tint-cool. */
  --sc-board-wood-warm:  #BEAA91;
  --sc-board-wood-cool:  #C0B9AC;

  /* Tile face proportion, h / w, from assets/models/tile.glb's bounds in
   * metres (0.18 × 0.14). Reserves the board's height before the scene
   * mounts; board.js reads the same ratio from the model itself. */
  --sc-board-tile-aspect: calc(0.18 / 0.14);

  /* TOKEN GAP (flagged for the brand system): the roll's rhythm has no
   * upstream primitive. Hold and rest carried over from the pre-Sprint-9
   * board; the stagger was 35ms and is retuned for the physical roll (owner
   * review 2026-09-24: faster). Suggested upstream names:
   * --sc-p-motion-stagger-sequence (12ms), --sc-p-motion-duration-hold-read
   * (4200ms), --sc-p-motion-duration-rest. */
  --sc-board-roll-stagger: 12ms;   /* between tile launches, in reading order */
  --sc-board-hold:         4200ms; /* a settled message stays this long */
  --sc-board-rest:         400ms;  /* empty rail between the cut and the next entrance */

  /* ===== Theme control dots — local addition 2026-09-25 =====
   * The dotted underline under the active word of the homepage Light / Dark
   * control (Figma 159:122: 2px dots on a 4px pitch). Read by
   * assets/js/theme-toggle.js via getComputedStyle.
   * Travel on hover uses --sc-motion-mode-*; the slow settle back to the
   * active mode uses --sc-motion-entrance-* (both upstream).
   * TOKEN GAP (flagged for the brand system): the per-dot stagger has no
   * upstream primitive. Suggested upstream name: --sc-p-motion-stagger-micro. */
  --sc-theme-dot-size:     2px;
  --sc-theme-dot-pitch:    4px;
  --sc-theme-dot-stagger:  18ms;   /* between neighbouring dots on travel */
  --sc-theme-dot-settle-stagger: 36ms; /* wider on the slow return to rest */

  /* ===== Shadow (pending) =====
   * Upstream now defines --sc-shadow-control-raised / --sc-shadow-control-inset
   * (button-only neumorphic tokens). The generic sm/md/lg slots this file once
   * reserved were never populated and are not planned — consume the control
   * tokens from the snapshot if a control needs them.
   */

  /* ===== Breakpoints (pending) =====
   * Agreed values: 390 / 768 / 1024 / 1440 / 1920.
   * Still not exported as CSS custom properties by the brand system —
   * use as build-time constants in JS / media queries until they are.
   */

  /* ===== Work grid (Sprint 10) =====
   * The tile visual's box, hardgraft's roughly 4:3 (contract line 2), and the
   * stills rendered at 1200 × 900 by scripts/render-model-stills.mjs.
   * Suggested upstream name: --sc-aspect-media-landscape. */
  --sc-work-visual-aspect: 4 / 3;
  /* How far a woodworking model turns toward the visitor on hover or focus
   * (contract line 10), in degrees. Suggested upstream: none, scene-local. */
  --sc-work-turn: 24; /* 2026-10-03: the piece now fills its frame; a wider turn clips */

  /* ===== Illustration aliases =====
   * The Three.js scenes read these NAMES via getComputedStyle, so they cannot
   * be renamed to --sc-* without touching the viewers. Each alias points at the
   * closest brand equivalent. Sprint 10 (ADR 2026-10-02 "woodworking models
   * paint from the white oak ramp"): the wood aliases now read the board's
   * white oak ramp (--sc-board-wood-*, matched to an oak sample 2026-09-25)
   * instead of warm grays — the grid shows these models on the page ground,
   * where a warm-gray-100 top was the ground's own colour and vanished.
   *
   * Do not consume these from new code. Use --sc-* directly.
   * (--focus-ring currently has no consumer; left in place rather than pruned
   * mid-reconcile — a separate cleanup, not this PR.) */
  --focus-ring:        var(--sc-color-border-focus);
  --wood-top:          var(--sc-board-wood-light);
  --wood-side-left:    var(--sc-board-wood-ring);
  --wood-side-right:   var(--sc-board-wood-base);
  --wood-leg:          var(--sc-board-wood-base);
  --wood-leg-edge:     var(--sc-board-wood-ring);
  --wood-cord:         var(--sc-p-color-warm-gray-700);
  --wood-cedar-burnt:  var(--sc-p-color-warm-gray-800);
  --led-warm-3000k:    var(--sc-p-color-warm-gray-50);
  --rattan-tan:        var(--sc-board-wood-warm);
  --rattan-hole:       color-mix(in srgb, var(--sc-p-color-utility-black) 55%, transparent);
  --scene-key-tint:    var(--sc-p-color-warm-gray-50);
}