:root {
  color-scheme: light;
  --font-family-base: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-family-accent: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-200: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  --font-size-300: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --font-size-400: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  --font-size-500: clamp(1.35rem, 1.2rem + 0.65vw, 1.75rem);
  --font-size-600: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --font-size-700: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);
  --font-size-800: clamp(2.75rem, 1.9rem + 4.2vw, 4.5rem);
  --font-size-900: clamp(3.25rem, 2.1rem + 5vw, 5.75rem);

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-relaxed: 1.6;

  --size-050: clamp(0.25rem, 0.23rem + 0.05vw, 0.3rem);
  --size-100: clamp(0.5rem, 0.46rem + 0.1vw, 0.6rem);
  --size-150: clamp(0.65rem, 0.58rem + 0.2vw, 0.85rem);
  --size-200: clamp(0.75rem, 0.68rem + 0.25vw, 1rem);
  --size-300: clamp(1rem, 0.9rem + 0.35vw, 1.3rem);
  --size-400: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  --size-500: clamp(2rem, 1.7rem + 0.9vw, 2.75rem);
  --size-600: clamp(2.5rem, 2.1rem + 1.1vw, 3.5rem);
  --size-700: clamp(3rem, 2.4rem + 1.4vw, 4.25rem);
  --size-800: clamp(3.5rem, 2.8rem + 1.6vw, 5rem);
  --size-900: clamp(4rem, 3.1rem + 1.8vw, 5.75rem);

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;

  --shadow-sm: 0 0.25rem 0.5rem rgba(9, 22, 43, 0.12);
  --shadow-md: 0 0.75rem 1.5rem rgba(9, 22, 43, 0.16);
  --shadow-lg: 0 1.5rem 3rem rgba(9, 22, 43, 0.25);

  --color-brand-950: #030b16;
  --color-brand-900: #07152c;
  --color-brand-800: #0d2647;
  --color-brand-700: #143966;
  --color-brand-600: #1e4f88;
  --color-accent-500: #1f9d7a;
  --color-accent-400: #25b08b;
  --color-surface-100: #ffffff;
  --color-surface-200: #f5f7fb;
  --color-surface-900: #061120;
  --color-text-primary: #0f1b2d;
  --color-text-secondary: #2c3b51;
  --color-text-on-dark: #f5f7fa;
  --color-border-muted: rgba(15, 27, 45, 0.08);

  --gradient-hero: linear-gradient(135deg, rgba(7, 21, 44, 0.86) 0%, rgba(13, 38, 71, 0.72) 100%);
  --backdrop-blur-amount: saturate(120%) blur(14px);

  --container-max: min(72rem, 100% - var(--size-300)*2);
  --nav-height: clamp(3.5rem, 3rem + 0.8vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-surface-100: #1e4f88;
    --color-surface-200: #0a1c33;
    --color-text-primary: #f4f7ff;
    --color-text-secondary: #d9e5ff;
    --color-border-muted: rgba(234, 241, 255, 0.22);
    --gradient-hero: linear-gradient(135deg, rgba(3, 11, 22, 0.9) 0%, rgba(9, 35, 61, 0.78) 100%);
  }
}