:root {
  --void-0: oklch(8% 0.02 270); /* #060812 */
  --void-1: oklch(12% 0.03 270); /* #0b0f1e */
  --void-2: oklch(18% 0.04 268); /* #131a30 */
  --warm-white: oklch(98% 0.02 85); /* #fbf6ec */
  --warm-white-dim: oklch(88% 0.02 85); /* #d8d2c5 */
  --turbo-orange: oklch(78% 0.20 50); /* #ff8a3d */
  --royal-violet: oklch(48% 0.22 295); /* #5a2bd1 */
  --electric-cyan: oklch(82% 0.16 220); /* #4ecdf2 */
  --molten-gold: oklch(85% 0.14 88); /* #f1c75a */
  --crack-amber: oklch(72% 0.22 60); /* #ff9a4a */
  --shadow-deep: oklch(4% 0.01 270 / 0.85); /* rgba(3,4,10,0.85) */
  --glass-edge: oklch(98% 0.02 85 / 0.08); /* rgba(251,246,236,0.08) */
  --success-mint: oklch(82% 0.15 165); /* #4fe6b1 */
}

@supports (color: oklch(0% 0 0)) {
  :root {
    --void-0: oklch(8% 0.02 270);
    --void-1: oklch(12% 0.03 270);
    --void-2: oklch(18% 0.04 268);
    --warm-white: oklch(98% 0.02 85);
    --warm-white-dim: oklch(88% 0.02 85);
    --turbo-orange: oklch(78% 0.20 50);
    --royal-violet: oklch(48% 0.22 295);
    --electric-cyan: oklch(82% 0.16 220);
    --molten-gold: oklch(85% 0.14 88);
    --crack-amber: oklch(72% 0.22 60);
    --shadow-deep: oklch(4% 0.01 270 / 0.85);
    --glass-edge: oklch(98% 0.02 85 / 0.08);
    --success-mint: oklch(82% 0.15 165);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  color: var(--void-2);
  background-color: var(--void-0);
  font-size: 1rem;
  line-height: 1.65;
}

/* Brand type system — self-hosted variable fonts (OFL, no CDN at runtime):
   display/headings/wordmark = Space Grotesk (geometric, cinematic);
   body/UI text             = Inter (legible neutral);
   code/preformatted        = JetBrains Mono.
   One variable woff2 per family covers every weight used below. */
@font-face {
  font-family: 'Space Grotesk';
  src: local('Space Grotesk'), url(/static/fonts/space-grotesk.woff2) format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter'), url(/static/fonts/inter.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: local('JetBrains Mono'), url(/static/fonts/jetbrains-mono.woff2) format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --body-font: 'Inter', system-ui, sans-serif;
  --button-font: 'Space Grotesk', system-ui, sans-serif;
}

h1 {
  font-family: var(--button-font);
  font-size: 6.2rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 4.2rem;
  }
}

h2 {
  font-family: var(--button-font);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  h2 {
    font-size: 2.4rem;
  }
}

p {
  font-family: var(--body-font);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  p {
    font-size: 1rem;
  }
}

.small {
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 300;
  opacity: 0.7;
}

button {
  font-family: var(--button-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: radial-gradient(circle at 50% 50%, var(--turbo-orange) 0%, var(--warm-white) 35%, transparent 70%);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.hero-gradient {
  background: radial-gradient(ellipse at 50% 35%, var(--royal-violet) 0%, var(--void-1) 45%, var(--void-0) 75%);
}

.section-divider {
  background: conic-gradient(from 215deg at 50% 100%, var(--turbo-orange) 0deg, var(--royal-violet) 90deg, transparent 180deg);
  height: 1px;
  opacity: 0.6;
}

/* Previews */
pre {
  font-family: 'JetBrains Mono', monospace;
  background: var(--glass-edge);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Color swatches */
.color-swatch {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  color: var(--void-2);
  font-family: var(--body-font);
  font-size: 0.88rem;
  text-align: center;
  line-height: 100px;
  background-color: var(--void-0);
}

.color-swatch::after {
  content: attr(data-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--void-2);
  font-family: var(--body-font);
  font-size: 0.88rem;
  text-align: center;
  line-height: 100px;
  background-color: var(--void-0);
}

/* Type specimens */
.type-specimen {
  margin: 1rem 0;
  font-family: var(--body-font);
  font-size: 1.1rem;
  line-height: 1.65;
}

.type-specimen h1 {
  font-family: var(--button-font);
  font-size: 6.2rem;
  font-weight: 700;
  letter-spacing: 0.20em;
}

.type-specimen h2 {
  font-family: var(--button-font);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.type-specimen p {
  font-family: var(--body-font);
  font-size: 1.1rem;
}

.type-specimen .small {
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 300;
  opacity: 0.7;
}

.type-specimen button {
  font-family: var(--button-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Fallbacks (font faces are declared once, above) */
:root {
  --body-font: 'Inter', system-ui, sans-serif;
  --button-font: 'Space Grotesk', system-ui, sans-serif;
}

/* Preview HTML */
pre {
  font-family: 'JetBrains Mono', monospace;
  background: var(--glass-edge);
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

/* Color swatches */
.color-swatch {
  width: 100px;
  height: 100px;
  margin: 10px;
  display: inline-block;
  color: var(--void-2);
  font-family: var(--body-font);
  font-size: 0.88rem;
  text-align: center;
  line-height: 100px;
  background-color: var(--void-0);
}

.color-swatch::after {
  content: attr(data-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--void-2);
  font-family: var(--body-font);
  font-size: 0.88rem;
  text-align: center;
  line-height: 100px;
  background-color: var(--void-0);
}

/* Type specimens */
.type-specimen {
  margin: 1rem 0;
  font-family: var(--body-font);
  font-size: 1.1rem;
  line-height: 1.65;
}

.type-specimen h1 {
  font-family: var(--button-font);
  font-size: 6.2rem;
  font-weight: 700;
  letter-spacing: 0.20em;
}

.type-specimen h2 {
  font-family: var(--button-font);
  font-size: 3.4rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.type-specimen p {
  font-family: var(--body-font);
  font-size: 1.1rem;
}

.type-specimen .small {
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 300;
  opacity: 0.7;
}

.type-specimen button {
  font-family: var(--button-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}