:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --fs-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  --fs-3xl: clamp(2.1rem, 1.7rem + 2vw, 3rem);
  --fs-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
  --fs-5xl: clamp(2.8rem, 2rem + 4vw, 5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad-y: clamp(4rem, 8vw, 7rem);
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* Z */
  --z-header: 100;
  --z-overlay: 200;

  /* Brand accent (constant across themes) */
  --brand-cyan: #00d4ff;
  --brand-blue: #4f7cff;
  --brand-violet: #7b5cff;
}

/* ============== DARK (default) ============== */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #06091a;
  --bg-elevated: #0b1024;
  --bg-card: rgba(255, 255, 255, 0.035);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --bg-glass: rgba(11, 16, 36, 0.65);

  --text: #e8ecf5;
  --text-muted: #9aa3bd;
  --text-dim: #6b7390;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --accent: var(--brand-cyan);
  --accent-2: var(--brand-blue);
  --accent-3: var(--brand-violet);

  --grad-text: linear-gradient(120deg, #00d4ff 0%, #4f7cff 50%, #7b5cff 100%);
  --grad-cta: linear-gradient(120deg, #00d4ff 0%, #4f7cff 100%);
  --grad-hero: radial-gradient(60% 50% at 50% 0%, rgba(79, 124, 255, 0.18) 0%, transparent 70%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.2), 0 12px 40px rgba(0, 212, 255, 0.18);

  --header-bg: rgba(6, 9, 26, 0.7);
}

/* ============== LIGHT ============== */
[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-elevated: #f6f8fc;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfcff;
  --bg-glass: rgba(255, 255, 255, 0.8);

  --text: #0a1130;
  --text-muted: #4a5478;
  --text-dim: #7b86a5;

  --border: rgba(10, 17, 48, 0.09);
  --border-strong: rgba(10, 17, 48, 0.18);

  --accent: #0078ff;
  --accent-2: #4f7cff;
  --accent-3: #7b5cff;

  --grad-text: linear-gradient(120deg, #0078ff 0%, #4f7cff 50%, #7b5cff 100%);
  --grad-cta: linear-gradient(120deg, #0078ff 0%, #4f7cff 100%);
  --grad-hero: radial-gradient(60% 50% at 50% 0%, rgba(79, 124, 255, 0.12) 0%, transparent 70%);

  --shadow-sm: 0 1px 2px rgba(10, 17, 48, 0.06);
  --shadow-md: 0 10px 30px rgba(10, 17, 48, 0.08);
  --shadow-lg: 0 24px 60px rgba(10, 17, 48, 0.12);
  --shadow-glow: 0 0 0 1px rgba(0, 120, 255, 0.18), 0 12px 40px rgba(0, 120, 255, 0.15);

  --header-bg: rgba(255, 255, 255, 0.78);
}