/* ============================================================================
   MARRENNE · THE WEIGHTED PAGE · DESIGN TOKENS (LOCKED, CANONICAL)

   THIS FILE (with tokens.json) IS THE SINGLE CANONICAL SOURCE OF TOKEN VALUES.
   The token blocks embedded in the Module 3 docs (MAR-31, MAR-33, MAR-34) and
   in Marrenne_Prototype_Brand_Guardrails.md are reference snapshots for the
   reasoning of record. If any of them ever differs from this file, THIS FILE
   WINS. Change a value here first, then propagate to those snapshots and log it
   (see the change-log rule in Brand Identity Build Plan/_MANIFEST.md).

   Do not invent a value that is not here. If a build needs one, stop and ask.

   Decisions and reasoning of record: Module 3 (MAR-31 color, MAR-33 UI kit,
   MAR-34 guidelines). Values reconciled July 24, 2026. Internal working file,
   not for external distribution.
   ============================================================================ */

:root{

  /* ---- COLOR · light grounds ------------------------------------------------ */
  --vellum:      #F5F2E8;   /* page ground. THIS is the background, never #FFFFFF */
  --vellum-2:    #EEEADC;   /* recessed fields, skeleton ground */
  --panel:       #F1EEE1;   /* sidebar panel */
  --ink:         #201D19;   /* primary text, rules, structural black */
  --slate:       #5A626C;   /* secondary text, structural second color */
  --slate-soft:  #8A9099;   /* decorative / non-text ONLY. Fails AA as body text */
  --hairline:    #DCD7C7;   /* interior rules */
  --hairline-2:  #E4DFCF;   /* table-row rules, skeleton sheen */
  --red:         #7D332C;   /* aged red. Punctuation only. Light grounds only. Max 1 per view */
  --bronze:      #9C7B3D;   /* imagery + dark grounds only. Never small text */
  --green:       #3F5B49;   /* status: active (text) */
  --green-bg:    #E3E7DE;   /* status: active (fill) */
  --neutral:     #635F56;   /* status: inactive (text) */
  --neutral-bg:  #E8E4D6;   /* status: inactive (fill) */
  --pressroom:   #22252A;

  /* ---- COLOR · dark grounds ------------------------------------------------- */
  --ground-dk:   #26221C;   /* dark ground, image well floor */
  --panel-dk:    #2B2721;
  --ink-hi:      #EFEBDD;   /* primary text on dark */
  --text-dk-2:   #C4BBA9;   /* warm ash, secondary text on dark */
  --text-dk-3:   #8A9099;   /* slate-soft holds on dark */
  --hairline-dk: #3A362F;

  /* ---- INTERACTION TONES ---------------------------------------------------- */
  --ink-hover:   #2A2620;   /* ink surface, hover */
  --ink-press:   #14120F;   /* ink surface, pressed */
  --track-bg:    #E0DACA;   /* progress track ground */

  /* ---- TYPE · families ------------------------------------------------------
     All licensed. Commercial Type orders SRJIRI (Canela, Canela Text,
     Canela Deck Regular) + YLYPUJ (Canela Deck Light); original order ACTJRZ.
     Söhne via Klim. @font-face declarations live in fonts.css. Georgia is the
     last-resort fallback only. No proxy fonts (Libre Caslon, Spectral, etc). */
  --canela-display: 'Canela', Georgia, serif;        /* masthead, hero, ledger figures */
  --canela-deck:    'Canela Deck', Georgia, serif;   /* page title H1 (weight 400); section head H2 (weight 300) */
  --canela-text:    'Canela Text', Georgia, serif;   /* editorial/house-voice body + nested card/list titles (weight 300) */
  --sans:           'Sohne', 'Segoe UI', sans-serif; /* ALL interface: buttons, tabs, nav, labels, tables, form input */

  /* ---- WORDMARK ------------------------------------------------------------- */
  --track-wordmark: .34em;   /* one tracking value everywhere; no pullback. */
  /* Optical cut varies by SIZE, not tracking: Canela Display for small
     (app bar 18px, sidebar 15px); Canela Text for the large masthead.
     Use the supplied wordmark ASSET files; do not set letter-spacing on top of
     a supplied asset or the tracking doubles. */

  /* ---- SPACING · 4px base --------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 30px; --space-8: 32px;
  --space-2h: 10px; --space-3h: 14px; --space-4h: 18px; --space-5h: 22px; --space-6h: 26px;

  /* ---- RADII ---------------------------------------------------------------- */
  --radius-control: 2px;   /* buttons, fields, pills, chips, pager cells */
  --radius-plate:   0;     /* plates, tables, cards, panels: SQUARE corners */
  --radius-round:   50%;   /* avatar, seal, FAB ONLY */

  /* ---- RULE WEIGHTS --------------------------------------------------------- */
  --rule-structural: 1px solid var(--ink);        /* structural rule + plate mount */
  --rule-thead:      2px solid var(--ink);        /* single table-head rule */
  --rule-interior:   1px solid var(--hairline);   /* interior rule */
  --rule-row:        1px solid var(--hairline-2); /* table rows */

  /* ---- FOCUS RING · accessibility requirement, not a style choice ----------- */
  --focus-ring:      2px solid var(--ink);      /* light grounds; offset 2px onto the ground */
  --focus-ring-tint: 2px solid var(--slate);    /* recessed / tinted fields */
  --focus-ring-dark: 2px solid var(--ink-hi);   /* ivory ring on dark grounds */
  --focus-offset:    2px;
  /* NEVER the default blue system focus ring. */

  /* ---- LOADING -------------------------------------------------------------- */
  --skeleton-ground: var(--vellum-2);
  --skeleton-sheen:  var(--hairline-2);
  /* Warm skeleton or the static seal only. Never a cold-grey shimmer or spinner. */

  /* ---- MOTION --------------------------------------------------------------- */
  --ease-settle: cubic-bezier(0.2, 0, 0, 1);   /* decelerate to rest, no overshoot */
  --dur-1: 120ms;   /* control tone changes: hover, press, focus */
  --dur-2: 200ms;   /* tabs, menus, panels, meter fill */
  --dur-3: 320ms;   /* view and plate resolution */
  --dur-4: 560ms;   /* skeleton sheen, slowest permitted */
  /* No bounce, spring, or looping motion. Full reduced-motion support required. */

  /* ---- ICON SIZES ----------------------------------------------------------- */
  --icon-sm: 15px; --icon-md: 17px; --icon-lg: 19px; --icon-xl: 21px;
  --icon-stroke: 1.6;   /* line icons, round terminals. No filled/celestial icons */
}

/* Reduced-motion: collapse all durations, keep no looping animation. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}