/* DESIGN TOKENS — Premium Banking UI */
:root {
  /* PALETTE: Navy + Blue + Warm Stone */
  --primary: #0B1220;
  --primary-dark: #050813;
  --primary-light: #1A2840;
  
  --accent: #1A56DB;
  --accent-hover: #1449C4;
  --accent-soft: rgba(26, 86, 219, 0.1);
  
  --surface: #FFFFFF;
  --surface-subtle: #FAF9F6;
  --bg: #F8F7F4;
  
  --text: #1F2328;
  --text-soft: #666460;
  --text-faint: #9D9B96;
  
  --border: #E5E0D5;
  --border-soft: #F0EDE6;
  
  --success: #15b981;
  --success-soft: rgba(21, 185, 129, 0.1);

  /* "Reconciled / good" green used by index.html's mock UI, PDF stamp, and
     security-section accents — kept distinct from --success since it's a
     slightly different shade tuned for those specific surfaces. */
  --good: #0B7F4A;
  --good-soft: #E6F7ED;

  --error: #cf222e;
  --error-soft: rgba(207, 34, 46, 0.1);
  
  --warning: #FF9500;
  --warning-soft: rgba(255, 149, 0, 0.1);
  
  /* SHADOW SYSTEM */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-sm: 0 2px 8px rgba(11, 18, 32, 0.08), 0 1px 3px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.12), 0 2px 8px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 10px 40px rgba(11, 18, 32, 0.2);
  --shadow-focus: 0 0 0 2px rgba(26, 86, 219, 0.2);
  
  /* SPACING */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  
  /* RADIUS */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* TYPOGRAPHY */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  
  /* BREAKPOINTS */
  --break-sm: 640px;
  --break-md: 960px;
  --break-lg: 1280px;
  
  /* Z-INDEX */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal: 100;
}

/* DARK MODE
   BOTH selectors below are required, and their values must stay in sync.
   The media query alone only covers people whose OS is already set to
   dark: on a light-set OS, the page's own dark toggle sets
   data-theme="dark" and nothing here matched, so the page kept its light
   background while the nav — which declares its own [data-theme="dark"]
   rule in index.html — went dark by itself. That is the "only the header
   turns dark" bug. Add any new dark token to both blocks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1117;
    --surface: #1C1F26;
    --surface-subtle: #262C34;
    --text: #E5E7EB;
    --text-soft: #A3A6AA;
    --text-faint: #6B6E73;
    --border: #30363D;
    --border-soft: #262C34;
    --accent: #4493F8;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1117;
  --surface: #1C1F26;
  --surface-subtle: #262C34;
  --text: #E5E7EB;
  --text-soft: #A3A6AA;
  --text-faint: #6B6E73;
  --border: #30363D;
  --border-soft: #262C34;
  --accent: #4493F8;
}