/* ═══════════════════════════════════════════
   DESIGN TOKENS — Single Source of Truth
   All CSS vars live here. Never hardcode values.
═══════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --green:          #16A34A;
  --green-dark:     #15803D;
  --green-light:    #22C55E;
  --green-dim:      rgba(22, 163, 74, 0.10);
  --green-glow:     rgba(22, 163, 74, 0.25);

  /* Backgrounds */
  --bg:             #FFFFFF;
  --bg-subtle:      #F8FAFC;
  --bg-muted:       #F1F5F9;
  --bg-border:      #E2E8F0;

  /* Text */
  --text:           #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --text-placeholder:#CBD5E1;

  /* Semantic */
  --up:    #16A34A;
  --dn:    #DC2626;
  --warn:  #D97706;
  --blue:  #2563EB;
  --purple:#7C3AED;
  --teal:  #0D9488;
  --red:   #DC2626;

  /* Semantic backgrounds */
  --bg-up:     rgba(22, 163, 74, 0.08);
  --bg-dn:     rgba(220, 38, 38, 0.08);
  --bg-warn:   rgba(217, 119, 6, 0.10);
  --bg-blue:   rgba(37, 99, 235, 0.08);
  --bg-purple: rgba(124, 58, 237, 0.08);
  --bg-teal:   rgba(13, 148, 136, 0.08);

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', monospace;

  /* 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;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Border Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --shadow-xl: 0 24px 64px rgba(15,23,42,.12);
  --shadow-green: 0 4px 20px rgba(22,163,74,.30);

  /* Layout */
  --max-width:  1280px;
  --ticker-h:   40px;
  --header-h:   64px;
  --top-offset: calc(var(--ticker-h) + var(--header-h));

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 250ms ease;
  --t-slow:   400ms ease;
}