/* ============================================================================
   Tech VPN Admin — Design Tokens (BUILD_PLAN §2.2/§2.3)
   Dark-first, navy + emerald. Every component consumes tokens, never raw hex.
   ========================================================================== */

:root {
  /* -------- brand + status (theme-independent) -------- */
  --primary: #10b981;        /* emerald */
  --primary-strong: #059669;
  --primary-soft: rgba(16, 185, 129, .14);
  --accent: #6366f1;         /* indigo */
  --accent-soft: rgba(99, 102, 241, .16);
  --vip: #f59e0b;            /* gold */
  --vip-soft: rgba(245, 158, 11, .16);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .15);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .15);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, .15);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, .15);

  /* categorical chart palette (colorblind-aware, labels never rely on hue alone) */
  --c1: #10b981; --c2: #6366f1; --c3: #f59e0b; --c4: #38bdf8;
  --c5: #f472b6; --c6: #a78bfa; --c7: #34d399; --c8: #fb7185;

  /* -------- typography -------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px;
  --lh: 1.5;

  /* -------- spacing (4px grid) -------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px;

  /* -------- radius -------- */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;

  /* -------- layout metrics -------- */
  --sidebar-w: 264px;
  --sidebar-collapsed-w: 72px;
  --topbar-h: 60px;
  --content-max: 1600px;

  /* -------- motion -------- */
  --t-fast: 120ms;
  --t-med: 180ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================ DARK (default) ============================ */
:root, :root[data-theme="dark"] {
  --bg: #0b1220;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(16,185,129,.06), transparent 60%),
             radial-gradient(1000px 500px at -10% 110%, rgba(99,102,241,.07), transparent 55%);
  --surface-1: #111a2b;   /* sidebar / bars */
  --surface-2: #16223a;   /* cards */
  --surface-3: #1e2e4d;   /* raised / hover */
  --surface-inset: #0e1626;
  --border: #26344f;
  --border-soft: #1c2942;
  --text: #e6edf6;
  --text-dim: #9aa9c2;
  --text-mute: #63728f;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.24);
  --shadow-2: 0 8px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(16,185,129,.4);
  --scrim: rgba(6, 11, 20, .66);
  color-scheme: dark;
}

/* ============================ LIGHT ============================ */
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, rgba(16,185,129,.10), transparent 60%),
             radial-gradient(1000px 500px at -10% 110%, rgba(99,102,241,.08), transparent 55%);
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f5fb;
  --surface-inset: #eef2f8;
  --border: #e2e8f2;
  --border-soft: #edf1f7;
  --text: #0b1220;
  --text-dim: #4a5670;
  --text-mute: #8a97ad;
  --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.08);
  --shadow-2: 0 12px 34px rgba(16,24,40,.16), 0 3px 10px rgba(16,24,40,.08);
  --ring: 0 0 0 3px rgba(16,185,129,.28);
  --scrim: rgba(20, 30, 48, .38);
  --primary-soft: rgba(16, 185, 129, .12);
  color-scheme: light;

  /* Status inks (success/warning/vip/info/danger) are tuned for dark surfaces — on the
     light surface-2 (#fff) the same saturated hues drop well under WCAG AA for text, so
     darken them here. Soft backgrounds are left as-is; only the on-badge/on-chip ink changes. */
  --success: #15803d;
  --warning: #92400e;
  --vip: #92400e;
  --info: #0369a1;
  --danger: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}