/* Semantic tokens: all interactive surfaces share these theme values. */
:root {
  color-scheme: light;
  --bg: #f5f7fb; --surface: #ffffff; --surface-alt: #eaf0f8; --surface-hover: #e2ebf8;
  --text: #17263d; --muted: #52627a; --subtle: #56677f;
  --line: #d6dfed; --line-strong: #aabbd3; --control-border: #778ba8;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-text: #ffffff; --highlight: #235ac5;
  --header-bg: rgb(245 247 251 / 92%); --project-bg: #edf2f9; --contact-bg: #e6eefb;
  --shadow: 0 24px 64px rgb(23 38 61 / 11%);
  --code-bg: #111c2c; --code-text: #dce5f4; --code-accent: #a3caff;
  --font-body: 'Manrope', system-ui, sans-serif; --font-display: 'Syne', 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --text-xs: .72rem; --text-sm: .86rem; --text-base: 1rem; --text-lg: 1.125rem;
  --title-xl: clamp(2.9rem, 4.55vw, 4.8rem); --title-lg: clamp(2rem, 3.2vw, 3.25rem);
  --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-section: clamp(72px, 8vw, 120px);
  --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --duration-fast: 160ms; --duration-ui: 260ms; --duration-reveal: 650ms; --ease: cubic-bezier(.22, 1, .36, 1); --wrap: 1280px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101925; --surface: #162234; --surface-alt: #1c2c43; --surface-hover: #263c59;
  --text: #f0f5ff; --muted: #b2c2da; --subtle: #a4b6d0; --line: #2d405b; --line-strong: #5c769b; --control-border: #728daf;
  --accent: #9bc4ff; --accent-hover: #bed9ff; --accent-text: #10284b; --highlight: #9bc4ff;
  --header-bg: rgb(16 25 37 / 92%); --project-bg: #132031; --contact-bg: #192c45;
  --shadow: 0 24px 64px rgb(0 0 0 / 22%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101925; --surface: #162234; --surface-alt: #1c2c43; --surface-hover: #263c59;
    --text: #f0f5ff; --muted: #b2c2da; --subtle: #a4b6d0; --line: #2d405b; --line-strong: #5c769b; --control-border: #728daf;
    --accent: #9bc4ff; --accent-hover: #bed9ff; --accent-text: #10284b; --highlight: #9bc4ff;
    --header-bg: rgb(16 25 37 / 92%); --project-bg: #132031; --contact-bg: #192c45;
    --shadow: 0 24px 64px rgb(0 0 0 / 22%);
  }
}