/* ═══════════════════════════════════════════════════════════════
   tedstuka.com — Design Tokens
   Single source of truth for color, type, spacing, shadow, radius.
   Locked: May 11, 2026
   Surfaces: index.html (homepage) + dashboard.html (operator surface)
   NOT applied to sub-builds (CBC, Luc, Stronghold, Bitcoin, etc.) —
   those keep their own brand identities.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND PALETTE ─── */
  --green:    #1F3D2A;   /* primary — nav, CTAs, eyebrows, card numbers, links */
  --green-h:  #2E5A3F;   /* primary hover */
  --green-a:  #142C1E;   /* primary pressed/active */
  --tan:      #B89968;   /* accent — FEATURED tagline only (single-purpose) */
  --cream:    #FAFAF7;   /* page background */
  --ink:      #1A1A1A;   /* text primary */
  --ink-m:    #5A5A5A;   /* text body */
  --ink-l:    #8A8A8A;   /* text muted */
  --border:   #E5E2DC;   /* warm-shifted border (not pure neutral gray) */
  --green-t:  #EDF1EE;   /* tinted hover bg from primary (~95% lightness) */
  --surface:  #FFFFFF;   /* card / panel backgrounds */
  --surface2: #F2EFE7;   /* deeper warm surface for bio section */

  /* ─── SEMANTIC / OPERATIONAL TOKENS ─── */
  /* These are universal across UI. Don't change per brand. */
  --live:         #16A34A;
  --live-halo:    rgba(22, 163, 74, 0.18);
  --building:     #D97706;
  --building-halo:rgba(217, 119, 6, 0.18);
  --danger:       #DC2626;
  --danger-bg:    rgba(220, 38, 38, 0.06);
  --danger-bd:    rgba(220, 38, 38, 0.20);
  --warning:      #F59E0B;

  /* ─── SHADOWS — 4-tier elevation scale ─── */
  /* Color tints brand-ward as elevation rises. Subtle is the goal. */
  --shadow-resting:  0 1px 3px rgba(13, 31, 60, 0.05);
  --shadow-hover:    0 4px 12px rgba(13, 31, 60, 0.08);
  --shadow-floating: 0 6px 16px rgba(31, 61, 42, 0.10);
  --shadow-modal:    0 18px 44px rgba(31, 61, 42, 0.18);
  --focus-ring:      0 0 0 3px rgba(31, 61, 42, 0.28);

  /* ─── TYPE SCALE — 7 sizes, locked ─── */
  --t-hero:    clamp(60px, 9.5vw, 130px);
  --t-section: clamp(40px, 5vw, 64px);
  --t-stat:    52px;
  --t-h1:      26px;
  --t-card:    22px;
  --t-feat:    12px;   /* featured tagline mono caps */
  --t-body:    14px;
  --t-caps:    11px;
  --t-mono:    11px;

  /* ─── FONTS ─── */
  --sans:    'Barlow', system-ui, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --mono:    'DM Mono', 'SFMono-Regular', Menlo, monospace;

  /* ─── LETTER-SPACING — direction-aware ─── */
  --ls-hero:    -0.025em;   /* tighten big display */
  --ls-section: -0.025em;
  --ls-card:    -0.02em;
  --ls-body:    0;
  --ls-mono:    0.09em;     /* widen tiny caps */
  --ls-feat:    0.16em;     /* widen featured tagline */

  /* ─── LINE-HEIGHT ─── */
  --lh-display: 0.92;
  --lh-h2:      1.05;
  --lh-card:    1.1;
  --lh-body:    1.7;
  --lh-stat:    1.0;

  /* ─── SPACING — 4-pt grid ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 100px;

  /* ─── RADIUS ─── */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;

  /* ─── TRANSITIONS ─── */
  --tr-fast: 0.15s ease;
  --tr-med:  0.2s ease;
  --tr-slow: 0.4s ease;
}

/* ─── DARK MODE (preserved, re-tuned for hunter green palette) ─── */
[data-theme="dark"] {
  --cream:    #0E1A12;
  --surface:  #15211A;
  --surface2: #0B1410;
  --ink:      #E8E4D8;
  --ink-m:    #A8A89E;
  --ink-l:    #6E6E66;
  --border:   #1F2D24;
  --green-t:  #1A2A20;
  --green:    #6FAB87;     /* lighter for visibility on dark */
  --green-h:  #84BD9B;
  --green-a:  #5A957A;
  --tan:      #C9A878;
  --shadow-resting:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-hover:    0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-floating: 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-modal:    0 18px 44px rgba(0, 0, 0, 0.7);
}