:root {
  --color-green-50:  #E1F5EE;
  --color-green-100: #9FE1CB;
  --color-green-200: #5DCAA5;
  --color-green-400: #1D9E75;
  --color-green-600: #0F6E56;
  --color-green-800: #085041;
  --color-green-900: #04342C;

  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F7F8F6;
  --color-neutral-100: #EEEEED;
  --color-neutral-200: #D4D4D0;
  --color-neutral-400: #9A9A96;
  --color-neutral-600: #5C5C5A;
  --color-neutral-800: #2C2C2A;
  --color-neutral-900: #141413;

  --color-accent-amber: #EF9F27;
  --color-danger:       #E24B4A;
  --color-success:      #1D9E75;

  --color-bg-page:      var(--color-neutral-50);
  --color-bg-surface:   var(--color-neutral-0);
  --color-bg-alt:       var(--color-neutral-100);
  --color-bg-hero:      var(--color-green-900);
  --color-bg-footer:    var(--color-green-900);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-400);
  --color-text-inverse:   var(--color-neutral-0);
  --color-text-brand:     var(--color-green-400);

  --color-border-light:   var(--color-neutral-200);
  --color-border-medium:  var(--color-neutral-400);
  --color-border-brand:   var(--color-green-400);

  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 3vw, 2rem);
  --text-4xl:  clamp(2rem, 4vw, 2.75rem);
  --text-5xl:  clamp(2.5rem, 5vw, 3.5rem);

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;

  --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;

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.08);

  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  --color-overlay-light: rgba(255,255,255,0.10);
  --color-overlay-border: rgba(255,255,255,0.18);
  --color-overlay-text: rgba(255,255,255,0.72);
  --color-overlay-muted: rgba(255,255,255,0.60);
  --color-focus-ring: rgba(29,158,117,0.15);
  --color-badge-amber-bg: #FEF3D7;
  --color-badge-amber-text: #7A4F08;
  --color-badge-hero-bg: rgba(255,255,255,0.14);
  --color-badge-hero-border: rgba(255,255,255,0.22);
  --color-footer-link: rgba(255,255,255,0.55);
  --color-footer-body: rgba(255,255,255,0.60);
  --color-footer-divider: rgba(255,255,255,0.12);
  --color-footer-muted: rgba(255,255,255,0.40);
  --color-social-bg: rgba(255,255,255,0.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:    #0F1410;
    --color-bg-surface: #1A1F1B;
    --color-bg-alt:     #141A15;
    --color-text-primary:   #F0F0EE;
    --color-text-secondary: #9A9A96;
    --color-border-light:   rgba(255,255,255,0.10);
    --color-border-medium:  rgba(255,255,255,0.20);
    /* Fix accordion/hover surfaces — neutrals used as bg must go dark */
    --color-neutral-50:  #232927;
    --color-neutral-100: #2C3330;
    /* NOTE: --color-neutral-0 intentionally NOT overridden — it's used as
       --color-text-inverse on dark hero/footer backgrounds and must stay white */
  }
}