:root {
  /* Brand Colors */
  --color-navy:        #1e3664;
  --color-navy-dark:   #131f3e;
  --color-navy-light:  #2a4a82;
  --color-green:       #00c853;
  --color-green-dark:  #00a844;
  --color-green-light: #33d46e;

  /* Surface Colors */
  --color-bg:          #0f1628;
  --color-surface:     #1a2444;
  --color-surface-alt: #222d52;
  --color-border:      #2e3d6b;

  /* Text Colors */
  --color-text:        #e8eaf6;
  --color-text-muted:  #8892b0;

  /* Typography */
  --font-body:    'Segoe UI', Arial, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-hero: clamp(1.9rem, 4vw, 3rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 4vw, 2rem);
  --header-height:  72px;

  /* Effects */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 20px rgba(0,200,83,0.2);
  --transition:  0.2s ease;
}