/* ───────────────────────────────────────────────────────────────────────────
   fonio-forecast — v2 design tokens (additive overlay)
   ───────────────────────────────────────────────────────────────────────────
   Phase A foundation. Loaded AFTER legacy /tokens.css to layer NEW tokens on
   top of the existing palette + scale. Strict rule for Phase A: NO value
   conflicts with legacy tokens (--space-1..6/8/10/12, --fs-*, --radius-*,
   --shadow-*, --bg, --surface, --ink-1/2/3, --line/-2, --lilac-*, --ae-*,
   --proj, --good, --warn, --duration-*, --z-*, --container-*, --bp-*).

   This file ONLY adds:
     - Missing spacing steps (--space-7/9/11)
     - Layout tokens for the new AppShell (sidebar + topbar + content max)
     - New semantic colors (--surface-elevated, --surface-hover, --accent-*)
     - Single-source channel color tokens (--ch-*) that resolve the Self-Serve
       --lilac-500/300 fork from INVENTORY.md §1e.

   Phase B+ primitives consume these tokens alongside the legacy ones.
   Phase E will fold the legacy tokens.css into this file.

   Spec: DESIGN.md §3a.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── New spacing steps (legacy has 0..6, 8, 10, 12, 16; interpolate) ────── */
  --space-7:  28px;
  --space-9:  36px;
  --space-11: 44px;

  /* ─── Layout tokens — Phase C onwards (AppShell + Sidebar + Topbar) ──────── */
  --sidebar-w-expanded:  240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            48px;
  --content-gutter:      var(--space-6);
  --grid-cols:           12;
  --grid-gap:            var(--space-4);
  /* --content-max + --bp-* already exist in legacy tokens.css. */

  /* ─── Semantic colors (new — supplement to legacy) ───────────────────────── */
  /* surface-elevated: floating elements (popover, modal). Same as surface in
     light; overridden in theme.css for dark to add 1-step elevation. */
  --surface-elevated:  var(--surface);
  /* surface-hover: row hover, ghost button hover */
  --surface-hover:     #F5F1ED;
  /* accent-hover: deeper accent on hover/press (light); brighter in dark */
  --accent-hover:      var(--lilac-700);
  /* accent-fg: text/icon color on top of accent fill */
  --accent-fg:         #FFFFFF;
  /* text-on-fill: theme-invariant white text for solid badges/buttons whose
     background is a status color (danger/warn/success/info). Stays #FFFFFF
     in both themes (the colored background carries the contrast). */
  --text-on-fill:      #FFFFFF;

  /* ─── Channel color tokens (resolves Self-Serve --lilac-500/300 fork) ────── */
  /* Single source of truth. Phase B+ DataTable, charts, badges read these
     instead of hand-picking var(--lilac-700) etc. Legacy code keeps working
     until Phase E migration. Brand palette is theme-invariant so no dark
     overrides needed for the --ch-* family. */
  --ch-gtm:     var(--lilac-700);   /* GTM — violet, primary brand */
  --ch-partner: var(--proj);        /* Partner — blue/teal */
  --ch-self:    #2BAFA0;            /* Self-Serve — teal (was --chart-6, reserved) */
  --ch-ae:      var(--ae-500);      /* AE — amber */
  --ch-others:  var(--ink-3);       /* Others — neutral grey */
  --ch-churn:   var(--warn);        /* Churn — red, semantic overlap with --danger */
  --ch-other:   var(--ink-3);       /* non-team Italy deals (same as --ch-others) */
}