:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --font-sans: Inter, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --hero-size: 64px;
  --hero-size-mobile: 40px;
  --section-size: 48px;
  --section-size-mobile: 32px;
  --subheading-size: 24px;
  --body-lg: 18px;
  --body: 16px;
  --eyebrow-size: 12px;
  --color-bg: #0a0e1a;
  --color-surface: #131826;
  --color-surface-high: #1c2333;
  --color-border: #2a3142;
  --color-text: #ffffff;
  --color-text-secondary: #b8c0d0;
  --color-text-muted: #6b7280;
  --color-accent: #818cf8;
  --color-accent-hover: #9ea6fb;
  --color-accent-soft: rgba(129, 140, 248, 0.12);
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;
  --shadow-soft: 0 30px 80px -48px rgba(0, 0, 0, 0.85);
}

html[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-high: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #0a0e1a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-accent-soft: rgba(99, 102, 241, 0.08);
  --shadow-soft: 0 24px 48px -36px rgba(15, 23, 42, 0.18);
}

body.public-site {
  background:
    radial-gradient(circle at top center, rgba(129, 140, 248, 0.16), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(129, 140, 248, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(10, 14, 26, 1) 0%, rgba(10, 14, 26, 0.96) 100%);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: 1.6;
  transition: background-color 180ms ease, color 180ms ease;
}

html[data-theme="light"] body.public-site {
  background:
    radial-gradient(circle at top center, rgba(99, 102, 241, 0.08), transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(99, 102, 241, 0.04), transparent 16%),
    #ffffff;
}

body.public-site h1,
body.public-site h2,
body.public-site h3,
body.public-site h4 {
  color: var(--color-text);
}

body.public-site p,
body.public-site li {
  color: var(--color-text-secondary);
}

body.public-site code,
body.public-site pre,
body.public-site .mono {
  font-family: var(--font-mono);
}

@media (max-width: 768px) {
  :root {
    --section-space: var(--section-space-mobile);
  }
}