/* ═══════════════════════════════════════════════════════════════════════════
   DATUM DESIGN TOKENS — the single source of truth for colour, space, radius,
   shadow and type. Added in Overhaul Stage 2.

   Loaded BEFORE part-01.css so part-01 can consume these; the 39 colour vars
   that already lived in part-01.css's :root are kept there and unchanged, so
   nothing that references them breaks. This file ADDS:
     · the semantic aliases the app was faking with hardcoded hex
     · a spacing scale
     · a type scale
     · the neutral white/black that must NOT be collapsed into the cream palette

   BRAND PALETTE (fixed — never recoloured):
     blanket cream   --bg        var(--bg)
     autumn fern     --green     var(--green)
     oak             --oak       var(--oak)
     khaki moss      --moss      var(--moss)
     mushroom        --mushroom  var(--mushroom)
     dark charcoal   --brand     var(--brand)   (text: --text var(--text))
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand tan / amber as TEXT. The fill values (--brand #A98D69, --orange var(--orange))
     read 2.3-2.9:1 as text on the cream surfaces — below the 3:1 floor anyone can
     comfortably read. Same hues, deepened for text: 3.9:1+ on cream, 4.7:1+ on
     white. Fills and pills keep the originals. */
  --brand-ink:#8a7050;
  --orange-ink:#8F6410;

  /* ── Neutrals that are genuinely neutral ────────────────────────────────
     #fff is used 127× for text/icons sitting ON a dark or coloured chip.
     It must stay pure white — collapsing it into --surface (cream) would
     tint that text. Kept as its own token rather than removed.            */
  --white: #FFFFFF;
  --black: #000000;

  /* ── Semantic aliases ───────────────────────────────────────────────────
     The app had three foreign palettes bolted on (Tailwind, Material and
     Google brand blue) doing the work these names describe. Everything now
     resolves to the brand palette already defined in part-01.css.         */
  --danger:          var(--red);
  --danger-bg:       var(--red-light);
  --danger-border:   var(--red-mid);
  --danger-text:     #7A3328;              /* deep brand red for text on --danger-bg */

  --warning:         var(--orange);
  --warning-bg:      var(--orange-light);
  --warning-border:  var(--orange-mid);
  --warning-text:    #8A5A1E;              /* deep brand amber for text on --warning-bg */

  --success:         var(--green);
  --success-bg:      var(--green-light);
  --success-border:  var(--green-mid);
  --success-text:    #42513C;              /* deep brand fern for text on --success-bg */

  --info:            var(--blue);
  --info-bg:         var(--blue-light);
  --info-border:     var(--blue-mid);
  --info-text:       #2C4E64;              /* deep brand blue for text on --info-bg */

  --accent:          var(--teal);
  --accent-bg:       var(--teal-light);

  /* ── Spacing scale (4px base) ───────────────────────────────────────────
     Replaces the ad-hoc 1px…40px paddings scattered through inline styles. */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  6px;
  --s-4:  8px;
  --s-5:  10px;
  --s-6:  12px;
  --s-7:  14px;
  --s-8:  16px;
  --s-9:  20px;
  --s-10: 24px;
  --s-11: 32px;
  --s-12: 40px;

  /* ── Type scale ─────────────────────────────────────────────────────────
     The app uses ~14 distinct font-size values inline; these are the rungs.
     Font stacks are tokenised here for the first time — previously the
     'DM Mono' stack was repeated inline 144× in part-06.js alone.          */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Montserrat', 'DM Sans', sans-serif;

  --t-9:   9px;      /* micro labels */
  --t-10:  10px;     /* uppercase eyebrow */
  --t-11:  11px;     /* meta / secondary */
  --t-12:  12px;     /* dense UI */
  --t-13:  13px;     /* body-dense (app default) */
  --t-14:  14px;     /* body */
  --t-16:  16px;     /* lead */
  --t-19:  19px;     /* card / modal heading */
  --t-24:  24px;     /* page / job title */
  --t-32:  32px;     /* hero figure */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  /* ── Radii ──────────────────────────────────────────────────────────────
     --r, --r-sm, --r-xs already exist in part-01.css; these extend the set. */
  --r-pill: 999px;
  --r-lg:   16px;

  /* ── Z-index ladder ─────────────────────────────────────────────────────
     Modal z-indexes were hand-picked per modal (400/450/460/600…). Named
     rungs so new surfaces stop guessing.                                   */
  --z-sticky:   100;
  --z-sidebar:  500;
  --z-modal:    400;
  --z-modal-2:  450;   /* a modal opened from a modal */
  --z-dropdown: 600;
  --z-toast:    900;
}