/* ============================================================================
 * BABYWEEKS — DESIGN TOKENS (single source of truth, D-421 Part 1 + 6.3)
 * ============================================================================
 * This file is the ONE place a design value may live. The app, the workbench
 * and every chat mock reference these names; no value ships in two places.
 *
 * Three tiers (D-421):
 *   1. PRIMITIVE — raw values, named by value. The ONLY tier allowed to hold
 *      a literal. Never referenced directly by component CSS; go through
 *      the semantic tier.
 *   2. SEMANTIC — role/intent names referencing primitives. This is the tier
 *      surfaces use. Names stay identical across editions/themes; only the
 *      values behind them swap (see the [data-theme]/[data-edition] blocks).
 *   3. COMPONENT — component-scoped tokens referencing semantic. Only where
 *      a composite genuinely earns its keep.
 *
 * EXTRACTION INVENTORY (built 2026-07-03, extract-don't-invent):
 *   - web/css/app.css — the shipped shell stylesheet: the full :root palette
 *     (--paper/--ink/--hero/--warm family), every raw hex/rgba then in use
 *     (tab bar #fffbf2/#e6dfd0/#8a9aab/#2c4a6b, hovers #f0ebe1/#f9f5ec,
 *     washes #fff5e6/#fdf2e6, error #d32f2f/#ffe6e6, avatar #a8d8ea,
 *     log-suggest #f5f0e8/#e2d9c8, success #3a7d44, accent-hover #b24a27,
 *     alpha variants of ink/paper/sage/warm), the type steps 8–60px, the
 *     spacing increments 2–44px, radii 2/3/4/6/12/18/999px, the two shadows,
 *     z-index 95/99/100/200/1000, durations 100–300ms.
 *   - D-411 brand anchors — wordmark "BabyWeeks." in Fraunces 600, the
 *     full-stop dot in dark teal #2e5c5c, on cream. The teal is the BRAND
 *     anchor (also already shipped in web/css/weaning.css); the in-app
 *     interactive accent today is still the warm orange — kept as-is,
 *     this file is a refactor, not a restyle.
 *   - web/css/progress.css + weaning.css carry surface-local palettes not
 *     yet reconciled into this file — listed as follow-up in the PR.
 *
 * Dynamic Type (catalogue D-423): all type primitives are rem so the scale
 * follows the user's text-size setting (html { font-size: 100% }). Fluid
 * sizes use clamp() with a rem floor/ceiling — never raw cqi/vw alone,
 * which clips at 200% zoom.
 * ========================================================================== */

:root {

  /* ==========================================================================
   * TIER 1 — PRIMITIVE (raw values, named by value; literals live ONLY here)
   * ========================================================================== */

  /* ---- Colour: cream ladder (light → dark) ------------------------------- */
  --cream-50:  #fffbf2;   /* tab-bar surface */
  --cream-100: #f9f5ec;   /* hover wash (chips, tiles, upload box) */
  --cream-150: #f5f0e8;   /* log-suggest row wash */
  --cream-200: #f5f0e0;   /* card surface (was --paper-card) */
  --cream-250: #f0ebe1;   /* card hover */
  --cream-300: #efe9d9;   /* paper ground (was --paper) */
  --cream-400: #e6dfca;   /* secondary surface (was --paper-2) */
  --cream-450: #e6dfd0;   /* tab-bar top border */
  --cream-500: #e2d9c8;   /* log-suggest border */
  --cream-600: #d8d2bf;   /* hairline rule (was --rule) */

  /* ---- Colour: ink ------------------------------------------------------- */
  --ink-900: #1a1a1a;     /* primary text (was --ink) */
  --ink-600: #5a5a55;     /* secondary text (was --ink-soft) */
  --ink-400: #8a8a82;     /* tertiary / disabled (was --ink-mute) */

  /* ---- Colour: teal (D-411 brand anchor) --------------------------------- */
  --teal-600: #2e5c5c;    /* wordmark full-stop dot; already live in weaning.css */

  /* ---- Colour: evergreen + sage (hero family) ---------------------------- */
  --green-900: #1a3a30;   /* deep evergreen (was --hero) */
  --green-800: #244a3e;   /* hero gradient secondary (was --hero-2) */
  --green-600: #3a7d44;   /* success / saved check */
  --sage-200:  #c8d2c8;   /* soft sage ornament (was --hero-soft) */

  /* ---- Colour: warm orange (current in-app accent) ----------------------- */
  --orange-600: #c25a2a;  /* accent (was --warm) */
  --orange-700: #b24a27;  /* accent hover/pressed */
  --orange-300: #e8a684;  /* soft accent (was --warm-soft) */
  --orange-100: #fdf2e6;  /* safety-card wash */
  --orange-50:  #fff5e6;  /* notice wash (disclaimers, selected tiles) */

  /* ---- Colour: slate + sky (tab bar, avatar variant) --------------------- */
  --slate-700: #2c4a6b;   /* tab-bar active */
  --slate-400: #8a9aab;   /* tab-bar inactive */
  --sky-200:   #a8d8ea;   /* avatar blue variant */

  /* ---- Colour: red (errors / offline) ------------------------------------ */
  --red-600: #d32f2f;
  --red-50:  #ffe6e6;

  /* ---- Colour: white ------------------------------------------------------ */
  --white: #ffffff;

  /* ---- Colour: alpha variants (exact rgba values in use) ------------------ */
  --ink-900-a04:   rgba(26, 26, 26, 0.04);    /* card shadow */
  --ink-900-a18:   rgba(26, 26, 26, 0.18);    /* sheet shadow */
  --ink-900-a55:   rgba(26, 26, 26, 0.55);    /* modal scrim */
  --black-a02:     rgba(0, 0, 0, 0.02);       /* row hover tint */
  --black-a08:     rgba(0, 0, 0, 0.08);       /* faint line fallback */
  --cream-300-a10: rgba(239, 233, 217, 0.1);
  --cream-300-a20: rgba(239, 233, 217, 0.2);
  --cream-300-a50: rgba(239, 233, 217, 0.5);
  --cream-300-a55: rgba(239, 233, 217, 0.55);
  --cream-300-a70: rgba(239, 233, 217, 0.7);
  --cream-300-a90: rgba(239, 233, 217, 0.9);
  --white-a72:     rgba(255, 255, 255, 0.72);
  --sage-200-a18:  rgba(200, 210, 200, 0.18); /* hero ornament */
  --sage-200-a00:  rgba(200, 210, 200, 0);
  --orange-600-a55: rgba(194, 90, 42, 0.55);  /* mic pulse */
  --orange-600-a00: rgba(194, 90, 42, 0);
  --ink-cool-a38:  rgba(21, 22, 26, 0.38);    /* page-label dev helper */

  /* ---- Type: family stacks ------------------------------------------------ */
  --font-stack-fraunces:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-stack-inter:     'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-stack-plex-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* ---- Type: weights ------------------------------------------------------ */
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;   /* D-411 wordmark weight */
  --weight-700: 700;

  /* ---- Type: size steps (rem; named by px equivalent @ 16px root) --------- */
  --size-8:  0.5rem;
  --size-9:  0.5625rem;
  --size-10: 0.625rem;
  --size-11: 0.6875rem;
  --size-12: 0.75rem;
  --size-13: 0.8125rem;
  --size-14: 0.875rem;
  --size-15: 0.9375rem;
  --size-16: 1rem;
  --size-17: 1.0625rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-22: 1.375rem;
  --size-24: 1.5rem;
  --size-26: 1.625rem;
  --size-28: 1.75rem;
  --size-32: 2rem;
  --size-34: 2.125rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-44: 2.75rem;
  --size-60: 3.75rem;

  /* ---- Type: tracking (letter-spacing steps in use) ----------------------- */
  --tracking-neg-015: -0.015em;
  --tracking-neg-01:  -0.01em;
  --tracking-01:  0.01em;
  --tracking-02:  0.02em;
  --tracking-04:  0.04em;
  --tracking-05:  0.05em;
  --tracking-08:  0.08em;
  --tracking-10:  0.1em;
  --tracking-12:  0.12em;
  --tracking-14:  0.14em;

  /* ---- Type: leading (line-height steps in use; unitless) ----------------- */
  --leading-100: 1;
  --leading-110: 1.1;
  --leading-115: 1.15;
  --leading-120: 1.2;
  --leading-140: 1.4;
  --leading-145: 1.45;
  --leading-150: 1.5;
  --leading-155: 1.55;
  --leading-160: 1.6;
  --leading-165: 1.65;

  /* ---- Space (px; named by value — the increments actually in use) -------- */
  --space-2:  2px;
  --space-3:  3px;
  --space-4:  4px;
  --space-5:  5px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;   /* minimum touch target */

  /* ---- Radii --------------------------------------------------------------- */
  --radius-2:  2px;
  --radius-3:  3px;
  --radius-4:  4px;
  --radius-6:  6px;    /* was --r-sm */
  --radius-12: 12px;   /* was --r-md */
  --radius-18: 18px;   /* was --r-lg */
  --radius-pill:  999px;
  --radius-round: 50%;

  /* ---- Layout widths -------------------------------------------------------- */
  --width-420: 420px;  /* content column (was --col-max) */
  --width-430: 430px;  /* tab-bar max width */

  /* ---- Motion (durations/easings in use; full spec lands with D-422) ------- */
  --duration-100: 0.1s;
  --duration-120: 0.12s;
  --duration-150: 0.15s;
  --duration-180: 0.18s;
  --duration-200: 0.2s;
  --duration-300: 0.3s;
  --ease-standard: ease;
  --ease-in-out: ease-in-out;

  /* ==========================================================================
   * TIER 2 — SEMANTIC (role names; everything is var(--primitive))
   * ========================================================================== */

  /* ---- Surfaces ------------------------------------------------------------ */
  --surface-ground:      var(--cream-300);   /* the paper the app sits on */
  --surface-card:        var(--cream-200);   /* raised card */
  --surface-card-hover:  var(--cream-250);
  --surface-sunken:      var(--cream-400);   /* recessed strips, banners */
  --surface-bar:         var(--cream-50);    /* tab bar */
  --surface-hover-wash:  var(--cream-100);   /* chip/tile hover */
  --surface-inverse:     var(--ink-900);     /* mic dock, chat input, primary btn */
  --surface-hero:        var(--green-900);
  --surface-hero-2:      var(--green-800);
  --surface-notice:      var(--orange-50);   /* disclaimers, selected tiles */
  --surface-safety:      var(--orange-100);  /* safety card */
  --surface-danger:      var(--red-50);

  /* ---- Text ------------------------------------------------------------------ */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-400);
  --text-on-dark:   var(--cream-300);   /* cream text on hero/ink surfaces */
  --text-on-accent: var(--cream-300);   /* text on warm-orange fills */

  /* ---- Borders ----------------------------------------------------------------- */
  --border-hairline: var(--cream-600);
  --border-bar:      var(--cream-450);

  /* ---- Brand + accent ------------------------------------------------------------ */
  --brand:        var(--teal-600);    /* D-411 anchor — wordmark dot; NOT yet the
                                       * in-app accent (colour system still in
                                       * exploration per D-411 §4) */
  --accent:       var(--orange-600);  /* current interactive accent */
  --accent-hover: var(--orange-700);
  --accent-soft:  var(--orange-300);
  --danger:       var(--red-600);
  --success:      var(--green-600);
  --ornament:     var(--sage-200);

  /* ---- Navigation (tab bar) --------------------------------------------------------- */
  --nav-active:   var(--slate-700);
  --nav-inactive: var(--slate-400);

  /* ---- Fonts ---------------------------------------------------------------- */
  --font-display: var(--font-stack-fraunces);
  --font-body:    var(--font-stack-inter);
  --font-mono:    var(--font-stack-plex-mono);
  --weight-display:  var(--weight-500);   /* headings ship at 500 */
  --weight-wordmark: var(--weight-600);   /* D-411: "BabyWeeks." in Fraunces 600 */

  /* ---- Type roles (rem via primitives — Dynamic Type safe) ------------------- */
  --text-display-xl: var(--size-44);   /* h1 */
  --text-display-lg: var(--size-36);   /* hero headline, weekly h1 */
  --text-display-md: var(--size-32);   /* hero week number */
  --text-display-sm: var(--size-28);   /* h2 / .heading */
  --text-title:      var(--size-22);   /* h3 */
  --text-subtitle:   var(--size-18);   /* h4, card heads */
  --text-body-lg:    var(--size-16);
  --text-body:       var(--size-15);
  --text-body-sm:    var(--size-14);
  --text-caption:    var(--size-13);
  --text-meta:       var(--size-12);
  --text-label:      var(--size-11);   /* mono eyebrows */
  --text-micro:      var(--size-10);

  /* ---- Radius roles -------------------------------------------------------------- */
  --radius-control:  var(--radius-6);
  --radius-card:     var(--radius-12);
  --radius-card-lg:  var(--radius-18);

  /* ---- Shadows + scrims (geometry lives inside the composite) ------------------ */
  --shadow-card:  0 1px 2px var(--ink-900-a04), 0 4px 16px var(--ink-900-a04);
  --shadow-sheet: 0 -8px 30px var(--ink-900-a18);
  --overlay-scrim: var(--ink-900-a55);

  /* ---- Layout ---------------------------------------------------------------------- */
  --layout-col-max: var(--width-420);
  --layout-bar-max: var(--width-430);
  --tap-target:     var(--space-44);

  /* ---- Z-index scale --------------------------------------------------------------- */
  /* token-exception: z-index is an ordinal scale — the numbers ARE the
   * relationship, a primitive layer underneath would add nothing. */
  --z-dock:    95;    /* mic dock, chat input row */
  --z-float:   99;    /* footer tag */
  --z-nav:     100;   /* tab bar */
  --z-banner:  200;   /* offline banner, page label */
  --z-overlay: 1000;  /* modal overlay */

  /* ==========================================================================
   * TIER 3 — COMPONENT (only where a composite earns its keep)
   * ========================================================================== */
  --hero-gradient: linear-gradient(135deg, var(--surface-hero) 0%, var(--surface-hero-2) 100%);
  --card-padding:  var(--space-16) var(--space-18);
  --focus-ring:    2px solid var(--accent);
}

/* ============================================================================
 * THEME / EDITION BLOCKS — structure only (D-421 Part 3)
 * Semantic names stay identical; a theme/edition is a VALUE swap behind the
 * same names, never a component change. Populate later; do NOT design here.
 * ========================================================================== */

[data-theme="dark"] {
  /* placeholder — dark values TBD (not designed yet, deliberately).
   * When populated, override SEMANTIC tokens only, e.g.:
   *   --surface-ground: …; --surface-card: …; --text-primary: …;
   * Never override primitives; never add new names. */
}

[data-edition="nl"] {
  /* placeholder — same semantic names, edition-specific values later
   * (D-414 parallel editions). */
}