:root {
  --space: #07080C;
  --deep: #0C0F1A;
  --ember: #FF4E1A;
  --dawn: #FFB347;
  --light: #FFF1D6;
  --text: #F2EFE9;
  --muted: #B4B2AD;
  --ink: #14121A;

  --space-rgb: 7 8 12;
  --ember-rgb: 255 78 26;
  --panel-alpha: 0.86;
  --scrim-alpha: 0.78;
  --hairline: rgb(255 255 255 / 0.08);
  --hairline-strong: rgb(255 255 255 / 0.18);

  --font-sans: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --hud-h: clamp(76px, 9.6vh, 100px);

  --brand-h: min(calc(var(--hud-h) * 0.78), 6.2vw);
  --gutter: clamp(24px, 5.5vw, 88px);
  --radius: 20px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --fs-h1: clamp(2.3rem, min(1.2rem + 3.5vw, 8.6vh), 4.5rem);
  --fs-h2: clamp(1.7rem, min(1.05rem + 2.2vw, 5.4vh), 3rem);
  --fs-deck: clamp(1rem, min(0.95rem + 0.3vw, 2.4vh), 1.16rem);
  --gap-1: clamp(6px, 1vh, 10px);
  --gap-2: clamp(10px, 1.7vh, 18px);
  --gap-3: clamp(14px, 2.6vh, 28px);
  --gap-4: clamp(20px, 4vh, 44px);
}

@media (max-width: 860px) {
  :root { --hud-h: 72px; --brand-h: min(calc(var(--hud-h) * 0.78), 8.5vw); }
}
@media (max-width: 560px) {
  :root { --brand-h: min(calc(var(--hud-h) * 0.5), 9.2vw); }
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url(../fonts/BricolageGrotesque.woff2) format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(../fonts/IBMPlexMono.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}