:root {
  --color-akira-red: #e12120;

  @media (color-gamut: p3) {
    --color-akira-red: oklch(from #e12120 l calc(c + 0.027) h);
  }

  --color-white: oklch(92% 0 0);
  --color-gray-lighter: oklch(82% 0 0);
  --color-gray-light: oklch(68% 0 0);
  --color-gray: oklch(54% 0 0);
  --color-gray-dark: oklch(25% 0 0);
  --color-gray-darker: oklch(17% 0 0);
  --color-black: oklch(3% 0 0);

  /* Accents */
  --accent: var(--color-akira-red);
  --accent-light: oklch(from var(--accent) calc(l + 7%) c h);
  --accent-dark: oklch(from var(--accent) calc(l - 14%) c h);

  /* Semantic tokens - dark theme */
  --text: var(--color-white);
  --text-muted: var(--color-gray);
  --text-faded: var(--color-gray-dark);
  --bg: var(--color-black);
  --bg-subtle: var(--color-gray-darker);
  --bg-muted: var(--color-gray-dark);
  --border: var(--color-gray-dark);

  /* Font families */
  --font-mono: "ServerMono", monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  padding: 3rem 2rem;
}

hr {
  border: none;
  border-bottom: 1px solid var(--border);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}