:root {
  color-scheme: dark;

  /* Brand and status colors */
  --color-teal-400: #38b7b0;
  --color-teal-500: #147d79;
  --color-orange-400: #ff873d;
  --color-orange-500: #f46a12;
  --color-purple-400: #aa96ff;
  --color-purple-500: #8067e8;
  --color-blue-400: #70adff;
  --color-blue-500: #4f99ff;
  --color-success: #53c98b;
  --color-warning: #f4ba52;
  --color-danger: #ff7777;

  /* Page surfaces and text */
  --color-background: #101316;
  --color-surface: #181d21;
  --color-surface-raised: #20272c;
  --color-surface-soft: #262e34;
  --color-border: #374149;
  --color-border-soft: rgb(255 255 255 / 9%);
  --color-text: #f3f5f6;
  --color-text-muted: #a6b0b7;
  --color-focus: #8fded9;

  /* Typography */
  --font-heading: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-utility: "IBM Plex Mono", monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-h3: clamp(1.5rem, 3vw, 2rem);
  --font-size-h2: clamp(2.25rem, 6vw, 4rem);
  --font-size-h1: clamp(3.5rem, 10vw, 7rem);
  --line-height-body: 1.65;
  --line-height-heading: 0.95;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Shape, depth, and width */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-raised: 0 1.5rem 4rem rgb(0 0 0 / 32%);
  --content-width: 76rem;
  --content-gutter: clamp(1rem, 4vw, 2rem);
}