/* ============================================================
   SOUTHWIND SUITE — canonical design tokens
   Extracted from Ground Game + Whiteboards + Dream Big source.
   THE ONE RULE: no app defines its own colors, fonts, radii, or
   motion. Everything reads these custom properties.
   ============================================================ */

:root {
  /* ---- color · surfaces (Ground Game charcoal night) ---- */
  --color-bg:        #0a0a0a;
  --color-bg-deep:   #050505;
  --color-surface:   #181818;
  --color-surface-2: #1e1e1e;
  --color-border:    #2a2a30;
  --color-border-soft: rgba(255,255,255,0.07);

  /* page atmosphere (warm copper glow on charcoal — the GG cast) */
  --bg-atmosphere:
    radial-gradient(1200px 600px at 18% -10%, rgba(184,115,51,0.16) 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 110%, rgba(255,210,74,0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg), var(--color-bg-deep));

  /* ---- color · text ---- */
  --color-text:      #f5f5f7;
  --color-text-dim:  #a0a0a8;
  --color-text-faint:#6b6b76;

  /* ---- color · accent (Ground Game copper→gold, deployed with conviction) ---- */
  --color-accent:        #B87333;
  --color-accent-bright: #ffd24a;
  --color-accent-ink:    #ffe1ad;
  --accent-grad:        linear-gradient(135deg, #ffd24a 0%, #c47333 100%);
  --accent-grad-soft:   linear-gradient(135deg, #f5b65c, #c47333);
  --accent-wash:   linear-gradient(135deg, rgba(184,115,51,0.22), rgba(255,210,74,0.05));
  --accent-wash-strong: linear-gradient(135deg, rgba(255,210,74,0.30), rgba(184,115,51,0.12));
  --accent-glint:  radial-gradient(circle, rgba(255,210,74,0.22), transparent 65%);
  --accent-border: rgba(255,210,74,0.45);
  --glow-accent:       0 0 14px rgba(184,115,51,0.40);
  --glow-accent-big:   0 0 28px rgba(255,210,74,0.28);
  --glow-accent-text:  0 0 18px rgba(255,210,74,0.45);

  /* ---- color · status (Dream Big neon R/Y/G) ---- */
  --color-good:  #00e676;
  --color-warn:  #ffb340;
  --color-bad:   #e8352a;
  --color-info:  #4a9eff;
  --good-bg:  rgba(0,230,118,0.14);
  --warn-bg:  rgba(255,179,64,0.14);
  --bad-bg:   rgba(232,53,42,0.14);
  --info-bg:  rgba(74,158,255,0.14);
  --good-border: rgba(0,230,118,0.6);
  --warn-border: rgba(255,179,64,0.6);
  --bad-border:  rgba(232,53,42,0.6);
  --glow-good-text: 0 0 14px rgba(0,230,118,0.55);
  --glow-warn-text: 0 0 14px rgba(255,193,7,0.45);
  --glow-bad-text:  0 0 14px rgba(232,53,42,0.55);
  --glow-good: 0 0 10px rgba(0,230,118,0.35);
  --glow-bad:  0 0 10px rgba(232,53,42,0.35);

  /* ---- color · tiers (Ground Game podium, verbatim) ---- */
  --color-gold:   #ffd24a;
  --color-silver: #c8d0d8;
  --color-bronze: #cd7f32;
  --halo-gold:
    0 0 0 3px var(--color-gold),
    0 0 56px rgba(255,210,74,0.55),
    0 0 22px rgba(255,210,74,0.4),
    0 0 12px rgba(255,210,74,0.3) inset;
  --halo-silver:
    0 0 0 3px var(--color-silver),
    0 0 26px rgba(200,208,216,0.7),
    0 0 12px rgba(200,208,216,0.45);
  --halo-bronze:
    0 0 0 3px var(--color-bronze),
    0 0 26px rgba(205,127,50,0.75),
    0 0 12px rgba(205,127,50,0.5);
  --gold-wash:   linear-gradient(180deg, rgba(255,210,74,0.28), rgba(255,210,74,0.06));
  --silver-wash: linear-gradient(180deg, rgba(200,208,216,0.18), rgba(200,208,216,0.04));
  --bronze-wash: linear-gradient(180deg, rgba(205,127,50,0.20), rgba(205,127,50,0.05));

  /* ---- color · portfolio accents (synced with Dream Big / Whiteboards) ---- */
  --pf-apex:    #0d9488;
  --pf-canada:  #dc2626;
  --pf-florida: #06b6d4;
  --pf-lfg:     #ea580c;
  --pf-midwest: #16a34a;
  --pf-nee:     #3b82f6;
  --pf-nyc:     #a21caf;
  --pf-pony:    #7c3aed;
  --pf-sec:     #c4813a;
  /* portfolio card gradients (Dream Big dark→tone pairs) */
  --grad-apex:    linear-gradient(135deg, #134e4a, #0d9488);
  --grad-canada:  linear-gradient(135deg, #7f1d1d, #dc2626);
  --grad-florida: linear-gradient(135deg, #164e63, #06b6d4);
  --grad-lfg:     linear-gradient(135deg, #7c2d12, #ea580c);
  --grad-midwest: linear-gradient(135deg, #14532d, #16a34a);
  --grad-nee:     linear-gradient(135deg, #1e3a8a, #3b82f6);
  --grad-nyc:     linear-gradient(135deg, #701a75, #a21caf);
  --grad-pony:    linear-gradient(135deg, #4c1d95, #7c3aed);
  --grad-sec:     linear-gradient(135deg, #78350f, #c4813a);
  --grad-default: linear-gradient(135deg, #1e2a4a, #1a4fd6);

  /* ---- typography (Playfair Display 900 + Lato — never system slop) ---- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', -apple-system, sans-serif;
  --text-stat:     clamp(44px, 9vw, 92px);   /* hero number — biggest thing on screen */
  --text-stat-2:   clamp(24px, 4.5vw, 42px); /* tile number */
  --text-display:  clamp(22px, 3.2vw, 30px); /* Playfair headers */
  --text-title:    17px;
  --text-body:     15px;
  --text-label:    11px;
  --text-micro:    9px;
  --track-label:   1.5px;   /* uppercase label tracking */
  --track-tight:  -0.5px;
  --track-stat:   -2px;

  /* ---- spacing rhythm (GG: 4/8/12/16/20/24) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ---- shape ---- */
  --radius-card: 16px;
  --radius-sub:  12px;
  --radius-btn:  10px;
  --radius-pill: 999px;
  --radius-bar:  3px;

  /* ---- elevation ladder ---- */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --elevation-2: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  --elevation-3: 0 8px 28px rgba(0,0,0,0.45);
  --elevation-panel:
    0 40px 80px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 2px 0 rgba(255,255,255,0.10) inset;

  /* ---- motion signature ---- */
  --ease-smooth: cubic-bezier(0.2, 0, 0, 1);
  --ease-rise:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast:   150ms;
  --motion-med:    220ms;
  --motion-screen: 400ms;
  --motion-enter:  550ms;
  --breathe:       3s ease-in-out infinite;
  --stagger-step:  45ms;
}

/* TV mode: larger floors, no chrome — legible from across the bay */
.tv-mode {
  --text-title: 24px;
  --text-body:  20px;
  --text-label: 16px;
  --text-micro: 13px;
  --text-stat:   clamp(72px, 10vw, 160px);
  --text-stat-2: clamp(40px, 5vw, 72px);
  --text-display: clamp(32px, 4vw, 56px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}