/*
 * Planner — production design tokens (canonical) · §09 migration Phase 1
 * ---------------------------------------------------------------------
 * SINGLE source of truth for CSS custom properties across every planner
 * page. Loaded FIRST (before components.css and the page CSS) by
 * gantt-builder.html and people.html. Replaces the three former :root
 * blocks (gantt-builder.css, people.html inline, close-month.css), which
 * had drifted apart (hex vs oklch accent, different alias sets).
 *
 * Canonical vocabulary: --text / --text-2 / --text-muted / --text-faint ·
 *   --surface / --surface-elev / --surface-raised · --border / --border-hover ·
 *   --accent · --sage / --amber / --blue · --av-c0..c7 / --av-cn.
 *
 * Phase 3 finalizer (2026-05-28): the legacy alias layer
 * (--paper / --ink / --line / --muted / --ok / --warn / --success / --pencil
 * + their -2/-soft variants) has been DELETED. Every consumer was rewritten
 * to the canonical names above. Do not reintroduce the aliases.
 *
 * Dark mode is DEFERRED (§09): the @media block below preserves the prior
 * dark appearance by overriding the same tokens it always did. The oklch
 * accent / sage / amber / blue and the avatar ramp are not re-derived for
 * dark yet.
 *
 * The /design-system styleguide links this file directly (not a fork copy).
 * design-system-reference/tokens.css is the vendored canonical reference used
 * by the drift gate (tools/check-ds-drift.mjs) — do not edit it by hand.
 */

:root {
  /* ── Surface ramp (warm paper → ink) ────────────────────────────── */
  --bg:              #f6f3ec;
  --surface:         #fbf9f3;
  --surface-elev:    #ffffff;
  --surface-raised:  #efebe1;
  --bg-hover:        rgba(177,90,42,0.06);

  /* ── Borders ────────────────────────────────────────────────────── */
  --border:          #e2dccd;
  --border-hover:    #d2cab6;
  --border-faint:    rgba(26,24,20,0.06);

  /* ── Text — neutral ramp ────────────────────────────────────────── */
  --text:            #1a1814;
  --text-2:          #3b362e;
  --text-muted:      #76705f;
  /* NOT a text colour. 2.09–2.49:1 on every surface in this ramp — it fails
     WCAG AA everywhere, and darkening it to pass lands on #767060, which is
     --text-muted. Use it for non-text marks only: dots, hairlines, separators,
     scrollbar thumbs, disabled glyph fills, hatch patterns. Readable strings
     use --text-muted or darker. (Dark: 2.78–3.36:1, same rule.) */
  --text-faint:      #aaa493;

  /* ── Accent — oklch terracotta (was #b15a2a / #f3e3d6) ──────────── */
  --accent:          oklch(58% 0.13 38);
  --accent-soft:     oklch(92% 0.04 38);

  /* ── Semantic accents ───────────────────────────────────────────── */
  --sage:            oklch(56% 0.09 145);
  --sage-soft:       oklch(93% 0.03 145);
  --amber:           oklch(72% 0.12 75);
  --amber-soft:      oklch(94% 0.05 75);
  --blue:            oklch(54% 0.10 240);
  --blue-soft:       oklch(93% 0.03 240);
  --danger:          #b1352a;
  --danger-soft:     #f4dad4;
  --error-soft:      #fee2e2;   /* drop-invalid hint (allocation grid) */

  /* ── Avatar / person-tag ramp — oklch, perceptually balanced ────── */
  --av-c0:           oklch(62% 0.13 245);  /* cobalt */
  --av-c1:           oklch(62% 0.13 350);  /* rose   */
  --av-c2:           oklch(60% 0.13 150);  /* moss   */
  --av-c3:           oklch(64% 0.13 80);   /* amber  */
  --av-c4:           oklch(60% 0.13 305);  /* violet */
  --av-c5:           oklch(62% 0.11 195);  /* teal   */
  --av-c6:           oklch(62% 0.13 30);   /* coral  */
  --av-c7:           oklch(60% 0.04 260);  /* slate  */
  --av-cn:           oklch(54% 0.02 75);   /* warm gray — "not a person" */
  --av-c5-soft:      oklch(93% 0.03 195);  /* teal tint — slack / free-capacity (allocation) */

  /* ── Cost class — CAPEX / OPEX (the net-new feature tokens). A neutral cool
     pair: neither reads as good/bad — budget health (sage/amber/danger) layers
     on top. `-soft` = fill behind pills/chips/tint stripes; `-ink` = the
     accessible text color on that soft fill. */
  --capex:      oklch(54% 0.11 245);  --capex-soft: oklch(93% 0.035 245); --capex-ink: oklch(40% 0.10 245);
  --opex:       oklch(57% 0.13 305);  --opex-soft:  oklch(94% 0.035 305); --opex-ink:  oklch(43% 0.11 305);

  /* ── Supplier series hues — shared chroma, varied hue. Used by money-over-time
     surfaces (Cashflow supplier rows/sparks). hue = supplier-order index % 8. */
  --s0: oklch(58% .12 38);  --s1: oklch(54% .10 240); --s2: oklch(56% .09 155);
  --s3: oklch(66% .12 70);  --s4: oklch(56% .12 330); --s5: oklch(55% .12 20);
  --s6: oklch(56% .09 200); --s7: oklch(58% .10 120);

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r-sm:            6px;
  --r-md:            10px;
  --r-lg:            14px;

  /* ── Shadows / elevation ────────────────────────────────────────── */
  --shadow-1:   0 1px 0 rgba(26,24,20,0.04), 0 1px 2px rgba(26,24,20,0.06);
  --shadow-2:   0 1px 0 rgba(26,24,20,0.05), 0 8px 24px -6px rgba(26,24,20,0.12);
  --shadow-pop: 0 1px 0 rgba(26,24,20,0.04), 0 12px 24px -6px rgba(26,24,20,0.14);

  /* ── Type — font stacks ─────────────────────────────────────────── */
  --font-sans:  'DM Sans', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* ── Modal backdrop ─────────────────────────────────────────────── */
  --backdrop:        rgba(26,24,20,0.42);

}

/* ── Dark mode — DEFERRED (§09). Preserves prior dark appearance by
   overriding the same tokens the old :root blocks did; new tokens
   (--surface-elev, --text-2, --text-faint, --border-faint) get sensible
   dark values. Accent/sage/amber/avatars are not re-derived in oklch yet. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:              #161310;
    --surface:         #1d1916;
    --surface-elev:    #2a241f;
    --surface-raised:  #25201c;
    --bg-hover:        rgba(215,122,74,0.08);

    --border:          #312a23;
    --border-hover:    #483e34;
    --border-faint:    rgba(236,229,214,0.06);

    --text:            #ece5d6;
    --text-2:          #cfc6b6;
    --text-muted:      #9b9281;
    --text-faint:      #6f685b;   /* non-text marks only — see the :root note */

    --accent:          #d77a4a;
    --accent-soft:     rgba(215,122,74,0.16);

    --sage:            #7ba66a;
    --sage-soft:       rgba(123,166,106,0.18);
    --amber:           #d29a3a;
    --amber-soft:      rgba(210,154,58,0.18);
    /* 2026-09 (design_handoff_dark_mode): --blue, --blue-soft and --backdrop were
       never overridden for dark, so info pills kept a 54%-lightness blue on a dark
       surface and the modal scrim (42% warm ink over #161310) barely darkened
       anything. Hand-picked like the rest of this block. */
    --blue:            #6f9fd8;
    --blue-soft:       rgba(111,159,216,0.18);
    --danger:          #e07a64;
    --danger-soft:     rgba(224,122,100,0.18);
    --error-soft:      rgba(239,68,68,0.18);
    --av-c5-soft:      rgba(63,163,154,0.18);  /* teal tint — slack / free-capacity (allocation) */
    --backdrop:        rgba(6,5,4,0.66);

    /* Cost class — lifted hues + translucent soft fills for the dark surface;
       -ink lightens so pill text stays legible on the soft fill. */
    --capex:      oklch(66% 0.12 245);  --capex-soft: rgba(74,128,204,0.18);  --capex-ink: oklch(78% 0.10 245);
    --opex:       oklch(68% 0.13 305);  --opex-soft:  rgba(150,104,204,0.18);  --opex-ink:  oklch(80% 0.11 305);
  }
}