/* ================================================================
   SAPD Design System — CSS Variables
   Complete color, typography, and spacing system
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@400;500;700;800&display=swap');

:root {
  /* ── COLOR PALETTE ── */
  --navy: #050f1f;
  --navy-mid: #0a1828;
  --navy-light: #0f2540;
  --surface: #0f2540;
  --panel: #132a47;
  --panel-hover: #1a3a57;
  --border: #1e3a52;
  --border-solid: #2f5580;

  /* ── PRIMARY ACCENT ── */
  --blue-accent: #2f8de4;
  --blue-bright: #4fa3ff;
  --blue-dark: #1e5bb8;

  /* ── STATUS COLORS ── */
  --green: #34d399;
  --red: #f87171;
  --amber: #f59e0b;
  --orange: #fb923c;
  --yellow: #fbbf24;
  --purple: #a78bfa;

  /* ── SPECIAL COLORS ── */
  --gold: #c9a84c;
  --white: #ffffff;
  --muted: #8da3bb;
  --muted-dark: #5a7a95;

  /* ── TYPOGRAPHY ── */
  --font-mono: 'IBM Plex Mono', monospace;
  --font-sans: 'Barlow', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;

  /* ── FONT SIZES ── */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 32px;
  --fs-4xl: 42px;

  /* ── LETTER SPACING ── */
  --ls-mono: 1.5px;
  --ls-title: -0.5px;
  --ls-section: 3px;

  /* ── SPACING SYSTEM ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* ── BORDER RADIUS ── */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);

  /* ── TRANSITIONS ── */
  --trans-fast: 0.15s ease;
  --trans-base: 0.2s ease;
  --trans-slow: 0.3s ease;

  /* ── Z-INDEX ── */
  --z-base: 1;
  --z-dropdown: 10;
  --z-fixed: 20;
  --z-sticky: 30;
  --z-modal: 100;
  --z-tooltip: 110;
}

/* ── ALWAYS DARK MODE ── */
:root {
  color-scheme: dark;
}