/* ============================================================
   BASE — CSS custom properties, reset, typography
   Red, White & Blue — American color scheme
   ============================================================ */

:root {
  /* Brand */
  --color-primary:       #002868;
  --color-primary-dark:  #001d4a;
  --color-primary-light: #1a4fa0;
  --color-primary-bg:    #e8edf8;
  --color-accent:        #BF0A30;
  --color-accent-dark:   #990824;
  --color-dark:          #0a1628;
  --color-dark-hover:    #1e2d3d;

  /* Second brand pair used in the logo, transactional emails, and a couple
     of hover-glow/box-shadow washes — intentionally distinct from
     --color-dark (site chrome navy), see docs/branding.md. */
  --color-gold:      #C5A028;
  --color-gunmetal:  #101820;

  /* Brand-as-foreground — for text/icons/borders placed on a surface that
     changes with theme (cards, badges, buttons). Distinct from --color-primary,
     which stays fixed navy because it's also used as a background/chrome color
     (sidebar, nav, footer) that must NOT change with theme. */
  --color-primary-text:       var(--color-primary);
  --color-primary-text-hover: var(--color-primary-dark);

  /* Text placed on the always-dark chrome (sidebar rail, mobile menubar) —
     that chrome never changes color with theme, so these stay constant too. */
  --color-primary-on-dark: #6fa8dc;
  --color-accent-on-dark:  #e0536f;

  /* Surfaces */
  --color-surface:       #ffffff;
  --color-surface-alt:   #f4f7f8;
  --color-border:        #d1dde0;
  --color-border-dark:   #b0c4c8;

  /* Text */
  --color-text:          #1a2332;
  --color-text-muted:    #5e7585;
  --color-text-inverse:  #ffffff;

  /* Semantic */
  --color-error:         #dc2626;
  --color-error-bg:      #fef2f2;
  --color-error-border:  #fecaca;
  --color-error-dark:    #b91c1c;
  --color-success:       #16a34a;
  --color-success-bg:    #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-warning:       #d97706;
  --color-warning-bg:    #fffbeb;
  --color-warning-border: #fde68a;
  --color-info:          #0284c7;
  --color-info-bg:       #f0f9ff;
  --color-info-border:   #bae6fd;

  /* Overlay — modal/nav backdrops */
  --overlay-bg: rgba(0, 0, 0, 0.5);

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* Transitions */
  --transition: 150ms ease;
  --transition-md: 250ms ease;

  /* Layout */
  --nav-height:    70px;
  --container-max: 1200px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /* Sidebar */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 52px;
  --mobile-menubar-height: 56px;
  --mobile-brand-height: 41px;

  /* Z-index scale */
  --z-nav:   1000;
  --z-toast: 1100;
  --z-modal: 1200;

  /* Scrollbars */
  --scrollbar-thumb:       var(--color-border-dark);
  --scrollbar-thumb-hover: var(--color-text-muted);
  --scrollbar-track:       transparent;

  /* Scrollbar-on-dark — for chrome that stays navy regardless of theme
     (sidebar rail), same rationale as --color-primary-on-dark above. */
  --scrollbar-thumb-on-dark:       rgba(255, 255, 255, 0.18);
  --scrollbar-thumb-on-dark-hover: rgba(255, 255, 255, 0.32);
}

/* ── Dark theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-surface:      #1a2332;
  --color-surface-alt:  #141c27;
  --color-border:       #2a3a4a;
  --color-border-dark:  #3a4a5a;
  --color-text:         #e8edf2;
  --color-text-muted:   #8aa0b0;
  --color-text-inverse: #ffffff;
  --color-primary-bg:   rgba(0, 40, 104, 0.15);

  --color-primary-text:       #6fa8dc;
  --color-primary-text-hover: #9fc9ec;

  /* Semantic colors lightened for legibility on dark surfaces; bg tints
     dropped from solid pastel to a low-alpha wash of the same hue so badges/
     alerts read as part of the dark UI instead of pastel cutouts on it. */
  --color-error:       #f87171;
  --color-error-bg:    rgba(220, 38, 38, 0.15);
  --color-success:     #4ade80;
  --color-success-bg:  rgba(22, 163, 74, 0.15);
  --color-warning:     #fbbf24;
  --color-warning-bg:  rgba(217, 119, 6, 0.15);
  --color-info:        #38bdf8;
  --color-info-bg:     rgba(2, 132, 199, 0.15);

  --scrollbar-thumb:       var(--color-border-dark);
  --scrollbar-thumb-hover: var(--color-text-muted);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--color-surface); }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary-text); text-decoration: none; }
a:hover { color: var(--color-primary-text-hover); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* Guards against classes that set display:flex/grid — the UA [hidden] rule
   loses to those otherwise, so JS visibility toggles need this to win. */
[hidden] { display: none !important; }