:root {
  color-scheme: dark;
  --bg: #040406;
  --bg-elevated: #0b0f14;
  --bg-panel: rgba(255, 255, 255, 0.045);
  --bg-panel-strong: rgba(255, 255, 255, 0.075);
  --bg-panel-accent: rgba(240, 52, 52, 0.11);
  --text: #f5f7fb;
  --text-soft: #d7deea;
  --muted: #9aa7bc;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.2);
  --red: #f03434;
  --red-soft: #ff7669;
  --steel: #90a0ba;
  --highlight: #ffffff;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  --radius-sm: 0.9rem;
  --radius-md: 1.35rem;
  --radius-lg: 2rem;
  --space-2xs: 0.35rem;
  --space-xs: 0.625rem;
  --space-sm: 0.95rem;
  --space-md: 1.35rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --container: min(100% - 2rem, 74rem);
  --container-wide: min(100% - 2rem, 96rem);
  --display: "Bahnschrift SemiCondensed", "Aptos Narrow", "Segoe UI", "Helvetica Neue", sans-serif;
  --body: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "Liberation Mono", monospace;
  --transition: 180ms ease;
}

@media (min-width: 80rem) {
  :root {
    --container: min(100% - 4rem, 80rem);
    --container-wide: min(100% - 4rem, 108rem);
  }
}