:root {
  --navy: #012241;
  --sky: #04aeef;
  --white: #fff;
  --bg: var(--navy);
  --surface: color-mix(in srgb, var(--navy) 94%, var(--white));
  --text: var(--white);
  --muted: color-mix(in srgb, var(--white) 74%, var(--navy));
  --line: color-mix(in srgb, var(--white) 18%, var(--navy));
  --accent-text: var(--sky);
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --text-xl: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  --text-hero: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .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;
  --radius-sm: .375rem; --radius-md: .75rem;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: var(--white);
  --surface: color-mix(in srgb, var(--white) 96%, var(--navy));
  --text: var(--navy);
  --muted: color-mix(in srgb, var(--navy) 76%, var(--white));
  --line: color-mix(in srgb, var(--navy) 20%, var(--white));
  --accent-text: var(--navy);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--text-base)/1.75 var(--font-body); -webkit-font-smoothing: antialiased; }
body, button, a, input { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); letter-spacing: -.015em; }
p { color: var(--muted); }
p + p { margin-top: var(--space-4); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 5px; }
::selection { color: var(--navy); background: var(--sky); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}