:root {
  color-scheme: dark;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-12: 0.75rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --text-56: 3.5rem;

  --text-xs: var(--text-12);
  --text-sm: var(--text-14);
  --text-base: var(--text-16);
  --text-lg: var(--text-18);
  --text-xl: var(--text-20);
  --text-2xl: var(--text-24);
  --text-3xl: var(--text-32);
  --text-4xl: var(--text-40);
  --text-5xl: var(--text-56);

  --type-h1: clamp(3.1rem, 4.8vw, 3.9rem);
  --type-h2: clamp(2.2rem, 3.4vw, 2.9rem);
  --type-h3: clamp(1.4rem, 2.2vw, 1.75rem);
  --type-body: var(--text-16);
  --type-small: var(--text-14);
  --type-caption: var(--text-12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;

  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 18px;
  --radius-4: 22px;
  --radius-pill: 999px;
  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-4);

  --shadow-color: rgba(9, 12, 24, 0.28);
  --shadow-1: 0 1px 2px rgba(9, 12, 24, 0.18);
  --shadow-2: 0 10px 24px rgba(9, 12, 24, 0.22);
  --shadow-3: 0 18px 40px rgba(9, 12, 24, 0.3);
  --shadow-glow: 0 0 0 1px rgba(139, 126, 255, 0.12), 0 14px 32px rgba(139, 126, 255, 0.18);

  --blur-1: 12px;

  --transition-fast: 160ms ease;
  --transition-medium: 240ms ease;

  --max-width: 1200px;
  --container-text: 760px;
  --container-pad: 20px;
  --section-pad: clamp(60px, 7.5vw, 104px);
  --section-pad-tight: clamp(44px, 6.2vw, 80px);
  --section-pad-hero: clamp(88px, 11vw, 140px);
  --card-pad: var(--space-6);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b0d16;
  --bg-elevated: #141628;
  --surface: #141a2e;
  --surface-2: #1a2238;
  --text: #f5f6ff;
  --text-muted: #d4d6f2;
  --border: rgba(152, 154, 199, 0.22);
  --border-strong: rgba(152, 154, 199, 0.36);

  --lav: #8b7cff;
  --lav-2: #a897ff;
  --lav-soft: rgba(139, 124, 255, 0.18);
  --lav-glow: rgba(139, 124, 255, 0.28);
  --lav-grad-a: rgba(139, 124, 255, 0.38);
  --lav-grad-b: rgba(77, 217, 240, 0.22);

  --aqua: #4dd9f0;
  --aqua-2: #7be4f6;
  --aqua-soft: rgba(77, 217, 240, 0.16);
  --aqua-glow: rgba(77, 217, 240, 0.26);

  --sun: #f6d35f;
  --sun-soft: rgba(246, 211, 95, 0.2);
  --sun-glow: rgba(246, 211, 95, 0.35);

  --glass: rgba(255, 255, 255, 0.05);
  --shine: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));

  --page-accent: var(--lav);
  --page-accent-soft: var(--lav-soft);
  --page-accent-glow: var(--lav-glow);

  --bg-0: var(--bg);
  --bg-1: #11152a;
  --bg-2: #151b35;
  --surface-1: var(--surface);
  --surface-2: var(--surface-2);
  --surface-elevated: var(--bg-elevated);
  --border-subtle: var(--border);
  --border-strong: var(--border-strong);
  --text-1: var(--text);
  --text-2: var(--text-muted);
  --text-3: rgba(213, 215, 242, 0.72);
  --muted: var(--text-muted);
  --link: var(--text-muted);

  --accent: var(--lav);
  --accent-2: var(--aqua);
  --accent-soft: var(--lav-soft);
  --focus-ring: 0 0 0 3px rgba(139, 124, 255, 0.35);

  --card-bg: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  --card-border: rgba(166, 171, 224, 0.3);
  --card-shadow: var(--shadow-1);
  --hero-glow: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--page-accent-glow) 60%, transparent), transparent 70%);
  --header-bg: rgba(12, 14, 27, 0.72);
  --header-bg-scrolled: rgba(10, 12, 22, 0.92);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #dfe1f0;
  --bg-elevated: #f0f2f8;
  --surface: #f0f2f8;
  --surface-2: #d8ddf1;
  --text: #0c0f22;
  --text-muted: #33394f;
  --border: rgba(104, 110, 148, 0.3);
  --border-strong: rgba(104, 110, 148, 0.45);

  --lav: #5f52e6;
  --lav-2: #786be6;
  --lav-soft: rgba(95, 82, 230, 0.18);
  --lav-glow: rgba(95, 82, 230, 0.26);
  --lav-grad-a: rgba(95, 82, 230, 0.36);
  --lav-grad-b: rgba(63, 186, 208, 0.24);

  --aqua: #1599b2;
  --aqua-2: #3bbad6;
  --aqua-soft: rgba(21, 153, 178, 0.18);
  --aqua-glow: rgba(21, 153, 178, 0.26);

  --sun: #d9b143;
  --sun-soft: rgba(217, 177, 67, 0.24);
  --sun-glow: rgba(217, 177, 67, 0.36);

  --glass: rgba(240, 242, 248, 0.7);
  --shine: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));

  --page-accent: var(--lav);
  --page-accent-soft: var(--lav-soft);
  --page-accent-glow: var(--lav-glow);

  --bg-0: var(--bg);
  --bg-1: #e6e9f5;
  --bg-2: #d2d8ec;
  --surface-1: var(--surface);
  --surface-2: var(--surface-2);
  --surface-elevated: var(--bg-elevated);
  --border-subtle: var(--border);
  --border-strong: var(--border-strong);
  --text-1: var(--text);
  --text-2: var(--text-muted);
  --text-3: rgba(47, 55, 81, 0.72);
  --muted: var(--text-muted);
  --link: var(--text-muted);

  --accent: var(--lav);
  --accent-2: var(--aqua);
  --accent-soft: var(--lav-soft);
  --focus-ring: 0 0 0 3px rgba(95, 82, 230, 0.32);

  --card-bg: #f0f2f8;
  --card-border: rgba(104, 110, 148, 0.32);
  --card-shadow: var(--shadow-1);
  --hero-glow: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--page-accent-glow) 60%, transparent), transparent 70%);
  --header-bg: rgba(240, 242, 248, 0.82);
  --header-bg-scrolled: rgba(240, 242, 248, 0.96);
}

body[data-accent='aqua'] {
  --page-accent: var(--aqua);
  --page-accent-soft: var(--aqua-soft);
  --page-accent-glow: var(--aqua-glow);
}

body[data-accent='sun'] {
  --page-accent: var(--sun);
  --page-accent-soft: var(--sun-soft);
  --page-accent-glow: var(--sun-glow);
}