/* ════════════════════════════════════════════════════════════════════
   Scout-Light variables-v2.css — Phase 0 (canonical token foundation)

   ALL rules in this file are scoped under :root[data-v2="1"] so they
   activate ONLY when the v2 feature flag is set (per §15 — flag set
   via ?v2=1 querystring or localStorage 'scout_v2'). When v2 is off,
   this file's rules don't match and the legacy variables.css drives
   the cascade unchanged.

   Token spec: SCOUT-LIGHT-PLAN.md §3
   Alias chain: §10.6
   Atmosphere: §5
   Phase 0 specifically excludes: theme-light.css decommission (Phase 1),
   .btn/.input/.badge primitives (Phase 3), banned-pattern strip (Phase 3+).

   All decisions D3-D26 baked in. Bodoni Moda removed entirely (per
   2026-05-04 prototype legibility test); Newsreader is the canonical
   display serif. Geist Sans body. JetBrains Mono Variable for tabular.
   ════════════════════════════════════════════════════════════════════ */

:root[data-v2="1"] {
  /* ─── COLOR: SURFACE TIERS (cool-mist tinted toward teal hue 200) ─── */
  --color-base:        oklch(0.98 0.005 200);
  --color-surface-1:   oklch(0.96 0.006 200);
  --color-surface-2:   oklch(0.93 0.008 200);
  --color-surface-3:   oklch(0.88 0.010 200);

  /* ─── COLOR: TEXT (dark with teal-tint) ─── */
  --color-text-primary:    oklch(0.20 0.010 200);
  --color-text-secondary:  oklch(0.45 0.008 200);
  --color-text-tertiary:   oklch(0.58 0.006 200);

  /* ─── COLOR: BRAND ACCENTS ─── */
  /* Brass: DISPLAY-ONLY in light Scout. ≥24px Newsreader + dark sidebar + Under PSA badge. */
  --color-accent:           oklch(0.72 0.12 80);
  --color-accent-hover:     oklch(0.65 0.13 75);
  --color-accent-muted:     oklch(0.72 0.12 80 / 0.10);
  --color-accent-rgb:       204,156,66;

  /* Teal: WORKING INTERACTIVE ACCENT — buttons, links, focus, CTAs. */
  --color-secondary:        oklch(0.55 0.08 200);
  --color-secondary-hover:  oklch(0.48 0.09 195);
  --color-secondary-muted:  oklch(0.55 0.08 200 / 0.10);
  --color-secondary-rgb:    41,128,132;

  /* ─── COLOR: SEMANTIC STATUS (tuned for AA on light surfaces) ─── */
  --color-success:        oklch(0.50 0.13 155);
  --color-success-muted:  oklch(0.50 0.13 155 / 0.10);
  --color-success-rgb:    14,110,80;
  --color-warning:        oklch(0.55 0.18 55);
  --color-warning-muted:  oklch(0.55 0.18 55 / 0.10);
  --color-warning-rgb:    181,99,14;
  --color-error:          oklch(0.50 0.18 25);
  --color-error-muted:    oklch(0.50 0.18 25 / 0.10);
  --color-error-rgb:      162,51,32;

  /* ─── COLOR: GLASS / OVERLAY ─── */
  --color-glass-border:         oklch(0.20 0.010 200 / 0.10);
  --color-glass-border-strong:  oklch(0.20 0.010 200 / 0.20);
  --color-glass-bg:             oklch(0.96 0.006 200 / 0.80);
  --color-overlay-bg:           oklch(0.20 0.010 200 / 0.50);

  /* ─── COLOR: SIDEBAR (dark chrome anchor — D3) ─── */
  --color-sidebar-bg:              oklch(0.20 0.010 200);
  --color-sidebar-bg-elevated:     oklch(0.25 0.012 200);
  --color-sidebar-border:          oklch(1 0 0 / 0.08);
  --color-sidebar-text-primary:    oklch(0.92 0.008 220);
  --color-sidebar-text-secondary:  oklch(0.65 0.008 240);
  --color-sidebar-text-tertiary:   oklch(0.42 0.006 250);
  --color-sidebar-active-bg:       oklch(0.72 0.12 80 / 0.10);
  --color-sidebar-active-fg:       var(--color-accent);

  /* ─── COLOR: STATUS — three families per D4 (refined 2026-05-04) ─── */
  /* Family A — Attempt outcomes */
  --color-stage-new:        var(--color-text-tertiary);
  --color-stage-contacted:  var(--color-secondary);
  --color-stage-callback:   var(--color-secondary);
  --color-stage-no-answer:  oklch(0.60 0.10 30);
  --color-stage-answered:   oklch(0.60 0.13 155);
  /* Family B — Deal pipeline (BRASS PROGRESSION + SUCCESS BREAK) */
  --color-stage-under-neg:  oklch(0.78 0.10 80);
  --color-stage-under-psa:  var(--color-accent);
  --color-stage-completed:  var(--color-success);
  /* Family C — Outcome states (decoration via row classes) */
  --color-stage-hot:        var(--color-warning);    /* + bold + 🔥 prefix REQUIRED per §9.5 color-blind mitigation */
  --color-stage-cold:       var(--color-text-tertiary);
  --color-stage-skip:       var(--color-text-tertiary);  /* + line-through via .row-skip */
  --color-stage-dnc:        var(--color-error);          /* + bold + error-tint bg + line-through via .row-dnc */
  --color-stage-deceased:   var(--color-text-tertiary);  /* + italic + 0.75 opacity + † prefix via .row-deceased */

  /* ─── TYPOGRAPHY: FONT FAMILIES ─── */
  --font-display: 'Newsreader', 'Georgia', serif;
  --font-body:    'Geist Sans', 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ─── TYPOGRAPHY: SIZE SCALE (rem-based, app UI) ─── */
  --text-display:    2.5rem;
  --text-h1:         2rem;
  --text-h2:         1.5rem;
  --text-h3:         1.125rem;   /* 18px (1.33 ratio from h2 — adjusted from 1.25rem) */
  --text-h4:         1rem;
  --text-body-lg:    1.125rem;
  --text-body:       0.875rem;
  --text-sm:         0.8125rem;
  --text-xs:         0.75rem;
  --text-label:      0.6875rem;

  /* ─── TYPOGRAPHY: LINE HEIGHTS ─── */
  --leading-display:  1.05;
  --leading-h1:       1.1;
  --leading-h2:       1.15;
  --leading-h3:       1.25;
  --leading-h4:       1.3;
  --leading-body:     1.6;
  --leading-tight:    1.2;
  --leading-relaxed:  1.75;

  /* ─── TYPOGRAPHY: LETTER-SPACING ─── */
  --tracking-tight:    -0.03em;
  --tracking-heading:  -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-label:    0.08em;

  /* ─── SPACING (4pt grid) ─── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;

  /* ─── BORDER RADIUS (sharp, architectural — cap at 8px) ─── */
  --radius-sm:    2px;
  --radius:       4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-pill:  9999px;

  /* ─── SHADOWS (overlay-only per D8) ─── */
  --shadow-overlay: 0 16px 48px oklch(0.20 0.010 200 / 0.18);

  /* ─── TRANSITIONS ─── */
  --duration-fast:      150ms;
  --duration-normal:    200ms;
  --duration-slow:      300ms;
  --duration-entrance:  600ms;
  --duration-exit:      150ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);

  /* ─── Z-INDEX SCALE ─── */
  --z-base:             0;
  --z-sticky:           2;
  --z-dropdown:         100;
  --z-header:           300;
  --z-sidebar-toggle:   400;
  --z-overlay:          500;
  --z-profile:          600;
  --z-search:           700;
  --z-modal:            900;
  --z-toast:            950;
  --z-auth:             1000;
  --z-billing-banner:   1100;  /* Above auth/toast/modal — lifecycle banner unmissable. Per §6.4-bis. */

  /* ════════════════════════════════════════════════════════════════
     ALIAS CHAIN (per §10.6 — compatibility shims for legacy CSS)

     Existing CSS rules (layout.css, components.css, dashboard.css,
     views.css, outreach.css) reference legacy token names like --bg,
     --accent, --text. These aliases route them to the new canonical
     tokens so legacy rules pick up v2 values WITHOUT requiring per-rule
     edits in Phase 0. Phase 8 deletes these aliases after Phase 5-7
     migrate every consumer to the canonical names directly.

     Per-consumer correctness review: §10.6.a (12+ sites flagged where
     the global default is wrong for that site).
     ════════════════════════════════════════════════════════════════ */
  --bg:           var(--color-base);
  --s1:           var(--color-surface-1);
  --s2:           var(--color-surface-2);
  --s3:           var(--color-surface-3);
  --s4:           var(--color-surface-3);                  /* collapse — Scout's tier-4 has no canonical equivalent */
  --accent:       var(--color-secondary);                  /* Scout navy CTA → light Scout's working CTA = teal */
  --accent-hover: var(--color-secondary-hover);
  --accent-deep:  var(--color-secondary-hover);
  --accent-rgb:   var(--color-secondary-rgb);
  --navy:         var(--color-text-primary);               /* gradient consumers WILL collapse to flat — per §10.6 navy alias warning, this is intentional (flat surfaces are correct; gradient-banned consumers fix themselves in Phase 5-7) */
  --navy-light:   var(--color-text-primary);               /* COLLAPSED to same value as --navy intentionally */
  --text:         var(--color-text-primary);
  --muted:        var(--color-text-secondary);
  --dim:          var(--color-text-tertiary);
  --gold:         var(--color-accent);                     /* brass — most .btn-primary sites are correct after this remap */
  --gold2:        var(--color-accent-hover);
  --gold3:        var(--color-accent-hover);
  --cta:          var(--color-secondary);                  /* CTAs are now teal (working accent on light) */
  --cta2:         var(--color-secondary-hover);
  --teal:         var(--color-secondary);                  /* fixes Scout's misnamed emerald --teal: #34D399 */
  --cyan:         var(--color-secondary);                  /* banned-name → teal */
  --amber:        var(--color-warning);
  --deep-teal:    var(--color-secondary-hover);
  --charcoal:     var(--color-surface-3);
  --light-gray:   var(--color-surface-3);
  --mid-gray:     var(--color-text-tertiary);
  --harbor-mist:  var(--color-text-tertiary);
  --red:          var(--color-error);
  --color-red:    var(--color-error);
  --color-red-rgb: var(--color-error-rgb);
  --green:        var(--color-success);
  --color-green:  var(--color-success);
  --color-green-rgb: var(--color-success-rgb);
  --orange:       var(--color-warning);
  --color-orange: var(--color-warning);
  --color-orange-rgb: var(--color-warning-rgb);
  --blue:         var(--color-secondary);                  /* drift → teal (per-consumer review §10.6.a flags exceptions) */
  --color-blue:   var(--color-secondary);
  --color-blue-rgb: var(--color-secondary-rgb);
  --purple:       var(--color-secondary);                  /* drift → teal (per-consumer review §10.6.a flags exceptions) */
  --color-purple: var(--color-secondary);
  --color-purple-rgb: var(--color-secondary-rgb);
  --color-cyan:   var(--color-secondary);                  /* banned-name → teal */
  --color-amber:  var(--color-warning);
  --color-amber-text: var(--color-warning);
  --color-amber-bg:   var(--color-warning-muted);
  --color-red-bg:     var(--color-error-muted);
  --color-red-text:   var(--color-error);
  --color-teal:   var(--color-secondary);
  --color-completed: var(--color-success);
  --color-callback: var(--color-warning);
  --color-money:  var(--color-accent);                     /* per migration plan recommendation (D17 retired) — money = brass */
  --offer-green:  var(--color-success);
  --color-call-btn:       var(--color-accent);             /* phone CTA = brass per D12 */
  --color-call-btn-hover: var(--color-accent-hover);

  /* Owner-status palette (per D4 + D25) — alias to canonical stage tokens */
  --color-new:              var(--color-stage-new);
  --color-no-answer:        var(--color-stage-no-answer);
  --color-answered:         var(--color-stage-answered);
  --color-callback-status:  var(--color-stage-callback);
  --color-under-neg:        var(--color-stage-under-neg);
  --color-under-psa:        var(--color-stage-under-psa);
  --color-skip:             var(--color-stage-skip);

  --placeholder:  var(--color-text-tertiary);
  --user-dot:     var(--color-secondary);
  --ring-track:   var(--color-glass-border);
  --text-on-dark: var(--color-sidebar-text-primary);
  --border:       var(--color-glass-border);
  --border2:      var(--color-glass-border-strong);
  --glass:        var(--color-glass-bg);
  --glass-hover:  var(--color-surface-2);
  --glass-strong: var(--color-glass-border-strong);
  --overlay-bg:   var(--color-overlay-bg);

  /* ─── BODY CASCADE OVERRIDES ─── */
  /* Override existing body rule's font-family + background + color
     so v2 typography activates without touching variables.css. */
}

/* ─── BODY/HTML CASCADE (when v2 is active) ───
   Scoped under :root[data-v2="1"] body to override the legacy
   body { font-family: 'Inter','DM Sans',sans-serif; background: var(--bg); }
   in variables.css. */
:root[data-v2="1"] body {
  background:        var(--color-base);
  color:             var(--color-text-primary);
  font-family:       var(--font-body);
  font-size:         var(--text-body);
  line-height:       var(--leading-body);
  position:          relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:    optimizeLegibility;
}

/* ─── ATMOSPHERE (per §5 — inverted noise + topographic teal) ───
   Replaces the legacy aurora-blob body::before/::after with the
   light-surface-appropriate inverted noise + topographic SVG.
   z-index: -1 so they sit beneath all content. */
:root[data-v2="1"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  /* Inverted noise — dark grain on light surface (vs OG's white grain on dark) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

:root[data-v2="1"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  /* Topographic SVG — Scout's distinctive paper-texture moment, recolored to teal */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 80 Q30 60 50 80 T90 80' fill='none' stroke='%23298084' stroke-width='.4'/%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' fill='none' stroke='%23298084' stroke-width='.3'/%3E%3Cpath d='M20 20 Q40 5 60 20 T100 20' fill='none' stroke='%23298084' stroke-width='.25'/%3E%3Cellipse cx='70' cy='65' rx='12' ry='8' fill='none' stroke='%23298084' stroke-width='.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23topo)'/%3E%3C/svg%3E");
}

/* ─── HEADINGS (default cascade — Geist Sans for product UI; Newsreader is opt-in via .text-display) ─── */
:root[data-v2="1"] h1,
:root[data-v2="1"] h2,
:root[data-v2="1"] h3,
:root[data-v2="1"] h4,
:root[data-v2="1"] h5,
:root[data-v2="1"] h6 {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  text-wrap: balance;
}
:root[data-v2="1"] h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-tight);   font-weight: 600; }
:root[data-v2="1"] h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-heading); font-weight: 600; }
:root[data-v2="1"] h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-heading); font-weight: 600; }
:root[data-v2="1"] h4 { font-size: var(--text-h4); line-height: var(--leading-h4); letter-spacing: var(--tracking-heading); font-weight: 600; }

/* ─── SELECTION + FOCUS ─── */
:root[data-v2="1"] ::selection {
  background: var(--color-secondary-muted);
  color: var(--color-text-primary);
}
:root[data-v2="1"] :focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ─── DISPLAY UTILITY (Newsreader opt-in for editorial moments ≥24px) ─── */
:root[data-v2="1"] .text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-optical-sizing: auto;
}
:root[data-v2="1"] .text-display-lg {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  font-optical-sizing: auto;
}
:root[data-v2="1"] .text-display-md {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
  font-weight: 500;
  font-optical-sizing: auto;
}

/* ─── LABEL UTILITY (mono caps eyebrow) ─── */
:root[data-v2="1"] .text-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  :root[data-v2="1"] *,
  :root[data-v2="1"] *::before,
  :root[data-v2="1"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── FORCED-COLORS MODE (Windows High Contrast) ─── */
/* Per §1.8 architecture rules — primary CTAs use system colors;
   focus rings use Highlight. Phase 3 expands per primitive. */
@media (forced-colors: active) {
  :root[data-v2="1"] :focus-visible {
    outline-color: Highlight;
  }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 0 SCOPE BOUNDARY
   This file ships ONLY the token foundation. The following are
   explicitly NOT in Phase 0:

   - Component primitives (.btn, .input, .badge, .modal, .kpi-value,
     .row-skip/.row-dnc/.row-deceased) — Phase 3
   - Per-screen rebuilds (sidebar, header, owner table, etc.) — Phases 2, 4, 5
   - theme-light.css decommission — Phase 1
   - Banned-pattern strip (gradients, glows, translateY hovers) — Phase 3+
   - Override-inventory consumer migration — Phase 5-7

   Phase 0 ONLY guarantees: when ?v2=1 is set, body inherits canonical
   light tokens, fonts swap to Newsreader/Geist Sans/JetBrains Mono Variable,
   atmosphere overlay paints inverted-noise + topographic-teal beneath
   content. Everything else still renders via the legacy CSS chain.
   ════════════════════════════════════════════════════════════════ */