:root {
  /* Colors are named by role, not by value. A light theme only has to
     redefine this block, for example in a prefers-color-scheme: light
     media query. Text colors meet 4.5:1 on both background and surface. */
  --color-bg: #0a0a0a;
  --color-surface: #161616;
  --color-border: #2a2a2a;
  --color-grid: #1e1e1e;
  --color-glow: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-text: #d4d4d4;
  --color-text-strong: #fafafa;
  --color-text-muted: #a3a3a3;
  --color-link-underline: #525252;
  --color-accent: #38bdf8;
  --color-on-accent: #0a0a0a;

  /* Typography: the root size grows slightly on wide screens; percentages
     keep the user's browser font setting in effect. */
  --font-size-root: clamp(100%, 90% + 0.25vw, 112.5%);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-title: clamp(2rem, 5vw, 2.5rem);
  --line-height-tight: 1.2;
  --line-height-base: 1.7;
  --letter-spacing-label: 0.08em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout: one reading column on every page, images included, so all
     content shares the same left edge. */
  --column-width: 42rem;
  --screenshot-width: 12rem;
  --gutter: var(--space-4);
  --icon-size: 1.25em;
  --project-icon-size: 2.5rem;
  --project-min-width: 18rem;
  --grid-spacing: 3rem;
  --grid-fade-shape: ellipse 70% 70% at 50% 0%;
  --glow-shape: ellipse 60% 50% at 50% -10%;
  --divider-width: 3rem;

  /* Shape */
  --border-width: 1px;
  --focus-width: 2px;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;

  /* Motion */
  --transition-fast: 150ms ease;
}