/* ============================================================================
   TowerDesk — design tokens (v1.0.9.8)
   ----------------------------------------------------------------------------
   Loads BEFORE app.css. This is the start of taming app.css (≈408 KB, 304
   distinct hard-coded hex values). It does three things, all additive and
   low-risk:

     1. Formalises the colour scales that app.css already uses, with the SAME
        values. app.css still carries its own :root for now, so nothing changes
        today (app.css's later :root wins by cascade order, value-for-value).
        The migration target is: delete app.css's :root and let this be the
        single source of truth.

     2. Fixes 3 orphaned custom properties that app.css references with NO
        fallback and never defines, so the declaration was silently dropped:
            --s150        a slate step used by dashed separators (.irow-actions,
                          .kr-c-actions) — borders that never rendered.
            --ff-display  font-family:var(--ff-display) — fell back to inherited.
            --ff-body     font-family:var(--ff-body)   — fell back to inherited.
        Defining them makes those declarations valid again. VERIFY ON STAGING:
        some separators/headings will now render as authored.

     3. Adds token categories the hard-coded-colour audit shows are needed
        (semantic status pairs, spacing, radius, shadow, z-index) so future
        hex→var() migration has real targets. Nothing references these yet;
        adopt them cluster by cluster (see docs/CSS_TOKENS.md).

   NOT defined here on purpose: --sidebar-bg, --sidebar-bg-solid, --ch, --fc,
   --tk-accent, --tk-kpi-col, and the --c-*/--ch-*/--c-aurora-* families. Those
   are set at runtime — by the brand-injection <style> in index.html / boot.js,
   or inline per element by the JS. Giving them static :root values would change
   un-branded first paint or mask per-element values. Leave them runtime-owned.
   ============================================================================ */

:root {
  /* ── Primary scale (brand navy → sky). Runtime brand-injection overrides
        --c400..--c900 + --gc; the values below are the TowerDesk defaults. ── */
  --c50:  #e8f0fa;
  --c100: #c4d8f5;
  --c200: #8db3ea;
  --c300: #4fa8dd;
  --c400: #2a7ec8;
  --c500: #165c9c;
  --c600: #124e87;
  --c700: #0e3d6b;
  --c800: #092c4e;
  --c900: #051b32;

  /* ── Accent scale (green). ── */
  --g50:  #e8f5ef;
  --g100: #c4e8d7;
  --g200: #8dcfb1;
  --g300: #5ab88e;
  --g400: #3da572;
  --g500: #33a766;
  --g600: #2a8d54;

  /* ── Neutral / slate scale. ── */
  --s50:  #f8f9fa;
  --s100: #f1f3f5;
  --s150: #eef0f2; /* FIX: was referenced (no fallback) but never defined. */
  --s200: #e9ecef;
  --s300: #dee2e6;
  --s400: #adb5bd;
  --s500: #868e96;
  --s600: #495057;
  --s700: #343a40;
  --s800: #212529;
  --s900: #0a0e12;

  /* ── Status / surface. ── */
  --cream:        #f5f8fc;
  --ok:           #2d9e6a;
  --warn:         #e5993e;
  --err:          #d94f4f;
  --info:         #4fa8dd;
  --gc:           linear-gradient(135deg, #165c9c 0%, #1e73c0 40%, #33a766 100%);
  --card-bg:      #fff;
  --card-border:  var(--s200);
  --table-hover:  var(--c50);
  --input-bg:     var(--s50);

  /* ── Typography (FIX: --ff-display / --ff-body were referenced with no
        fallback and never defined). These match the literals used throughout. ── */
  --ff-display: 'Montserrat', sans-serif;
  --ff-body:    'Inter', sans-serif;

  /* ── NEW: semantic status pairs (soft background + readable foreground).
        These consolidate the badge/pill colours hard-coded across app.css
        (e.g. #fff3e0/#e65100 warn, #e8f5e9/#2e7d32 ok). Migration targets. ── */
  --ok-soft-bg:   #e8f5e9;  --ok-soft-fg:   #2e7d32;  --ok-soft-bd:   #a5d6a7;
  --warn-soft-bg: #fff3e0;  --warn-soft-fg: #e65100;  --warn-soft-bd: #ffcc80;
  --err-soft-bg:  #fce4ec;  --err-soft-fg:  #c62828;  --err-soft-bd:  #ef9a9a;
  --info-soft-bg: #e3f2fd;  --info-soft-fg: #1565c0;  --info-soft-bd: #90caf9;

  /* ── NEW: spacing scale (4px base). ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── NEW: radius scale (matches the 6/8/12/16px values app.css uses). ── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ── NEW: elevation scale. ── */
  --sh-sm: 0 1px 3px rgba(5, 27, 50, .06);
  --sh-md: 0 4px 16px rgba(5, 27, 50, .08);
  --sh-lg: 0 12px 32px rgba(5, 27, 50, .15);

  /* ── NEW: z-index scale (matches app.css: topbar 50, sidebar 100, panels
        300, modal 2000, mobile search 2500, toast 3000). ── */
  --z-sticky: 50;
  --z-sidebar: 100;
  --z-panel: 300;
  --z-modal: 2000;
  --z-search: 2500;
  --z-toast: 3000;
}