/* ============================================================
   SURGE TACTIC — CLIENT PORTAL
   Design Tokens (variables.css)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {

  /* ── Colors ── */
  --bg:           #080c0d;
  --bg2:          #0d1315;
  --surface:      #111a1c;
  --surface2:     #162022;
  --border:       #1e2e31;
  --border2:      #243537;
  --text:         #dde8ea;
  --text-dim:     #a0bcc0;   /* improved contrast over original #8aa4a8 */
  --muted:        #5a7d82;   /* improved contrast over original #4d6b6f */
  --accent:       #0e8c9a;
  --accent-hi:    #12a8b8;
  --accent-lo:    rgba(14, 140, 154, 0.10);
  --accent-glow:  rgba(14, 140, 154, 0.18);
  --green:        #4ade80;   /* positive deltas */
  --red:          #f87171;   /* negative deltas */
  --amber:        #fbbf24;   /* warning / neutral delta */

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Spacing scale ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Layout ── */
  --max-width:     1200px;
  --nav-height:    64px;
  --section-pad:   40px;
  --wrap-pad:      48px;

  /* ── Border radius ── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;

  /* ── Transitions ── */
  --t-fast:   0.15s ease;
  --t-base:   0.2s ease;
  --t-slow:   0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Shadows / Glows ── */
  --shadow-card:   0 2px 16px rgba(0, 0, 0, 0.4);
  --glow-accent:   0 0 16px var(--accent-glow);
  --glow-green:    0 0 8px rgba(74, 222, 128, 0.4);

  /* ── Z-index scale ── */
  --z-nav:     100;
  --z-modal:   200;
  --z-tooltip: 300;
}