:root {
  color-scheme: light dark;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ink-0: #ffffff;
  --ink-1: #edf2ff;
  --ink-2: #aeb8cc;
  --ink-3: #7d899f;
  --surface-0: #070a10;
  --surface-1: #0b1019;
  --surface-2: #101722;
  --surface-3: #151e2b;
  --line: rgba(177, 196, 226, 0.14);
  --line-strong: rgba(177, 196, 226, 0.24);
  --brand: #7c8cff;
  --brand-bright: #a6b0ff;
  --cyan: #4ed8c7;
  --amber: #ffc76b;
  --success: #6fe2a6;
  --danger: #ff8797;
  --gradient-brand: linear-gradient(135deg, #a9b2ff 0%, #7c8cff 42%, #4ed8c7 100%);
  --gradient-surface: linear-gradient(180deg, rgba(124, 140, 255, 0.08), rgba(78, 216, 199, 0.02));
  --header-bg: rgba(7, 10, 16, 0.82);
  --header-solid: rgba(7, 10, 16, 0.98);
  --footer-bg: rgba(5, 8, 13, 0.65);
  --card-start: rgba(255, 255, 255, 0.035);
  --card-end: rgba(255, 255, 255, 0.012);
  --card-hover: rgba(124, 140, 255, 0.07);
  --on-brand: #07100f;
  --on-accent: #07100f;
  --code-bg: #080c13;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.38);
  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.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;
  --space-32: 8rem;
  --container: 74rem;
  --container-narrow: 48rem;
  --transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --ink-0: #101522;
  --ink-1: #192131;
  --ink-2: #4f5b70;
  --ink-3: #647086;
  --surface-0: #f7f9fc;
  --surface-1: #ffffff;
  --surface-2: #f0f3f9;
  --surface-3: #e7ebf3;
  --line: rgba(38, 53, 78, 0.14);
  --line-strong: rgba(38, 53, 78, 0.24);
  --brand: #5367dc;
  --brand-bright: #4057d3;
  --cyan: #087f74;
  --amber: #8a5900;
  --success: #137a48;
  --danger: #b33149;
  --on-accent: #ffffff;
  --gradient-brand: linear-gradient(135deg, #8795f4 0%, #6579e7 45%, #46c4b5 100%);
  --gradient-surface: linear-gradient(180deg, rgba(83, 103, 220, 0.08), rgba(8, 127, 116, 0.025));
  --header-bg: rgba(247, 249, 252, 0.86);
  --header-solid: rgba(247, 249, 252, 0.98);
  --footer-bg: rgba(237, 241, 247, 0.72);
  --card-start: rgba(255, 255, 255, 0.95);
  --card-end: rgba(244, 247, 252, 0.82);
  --card-hover: rgba(83, 103, 220, 0.08);
  --shadow-sm: 0 8px 24px rgba(30, 43, 69, 0.08);
  --shadow-lg: 0 30px 90px rgba(30, 43, 69, 0.13);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --ink-0: #101522;
    --ink-1: #192131;
    --ink-2: #4f5b70;
    --ink-3: #647086;
    --surface-0: #f7f9fc;
    --surface-1: #ffffff;
    --surface-2: #f0f3f9;
    --surface-3: #e7ebf3;
    --line: rgba(38, 53, 78, 0.14);
    --line-strong: rgba(38, 53, 78, 0.24);
    --brand: #5367dc;
    --brand-bright: #4057d3;
    --cyan: #087f74;
    --amber: #8a5900;
    --success: #137a48;
    --danger: #b33149;
    --on-accent: #ffffff;
    --header-bg: rgba(247, 249, 252, 0.86);
    --header-solid: rgba(247, 249, 252, 0.98);
    --footer-bg: rgba(237, 241, 247, 0.72);
    --card-start: rgba(255, 255, 255, 0.95);
    --card-end: rgba(244, 247, 252, 0.82);
    --card-hover: rgba(83, 103, 220, 0.08);
    --shadow-sm: 0 8px 24px rgba(30, 43, 69, 0.08);
    --shadow-lg: 0 30px 90px rgba(30, 43, 69, 0.13);
  }
}