:root {
  --bg: #0d0d0d;
  --surface: #141414;
  --elevated: #1c1c1c;
  --surface-panel: #141414;
  --surface-rail: #111111;
  --surface-neutral: #1a1a1a;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --border-hair: #1f1f1f;

  --text: #d8d8d8;
  --text-dim: #8a8a88;
  --text-mute: #5a5a58;
  --text-faint: #3a3a38;

  --accent-h: 32;
  --accent-s: 100%;
  --accent-l: 52%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-dim: hsl(var(--accent-h) calc(var(--accent-s) - 10%) calc(var(--accent-l) - 8%));
  --accent-tint: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.12);
  --accent-ink: #0d0d0d;
  --button-invert-bg: #f2f2ef;
  --button-invert-ink: #0d0d0d;

  --info: #00c8d7;
  --success: #00c85a;
  --warn: #ffbc00;
  --error: #f71720;
  --status-live: var(--success);
  --status-live-ink: var(--success);
  --status-track: #2f2f2f;
  --status-track-dot: #3a3a3a;

  --content-max: 1440px;
  --content-wide: 1360px;
  --content-narrow: 720px;
  --gutter: 24px;
  --gutter-wide: 48px;

  --row-h: 40px;
  --row-h-dense: 32px;
  --button-h: 38px;
  --button-px: 15px;
  --nav-h: 56px;
  --subnav-h: 36px;
  --resource-logo-size: 24px;
  --resource-logo-pad: 3px;
  --resource-logo-paper: var(--text);
  --resource-logo-ink: var(--bg);
  --resource-row-pad-y: 16px;
  --resource-row-gap: 6px;
  --resource-row-note-pad-bottom: 4px;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ts-hairline: 10px;
  --ts-meta: 11px;
  --ts-body-s: 12px;
  --ts-body: 13px;
  --ts-body-l: 15px;
  --ts-title-s: 20px;
  --ts-title: 28px;
  --ts-display-s: 48px;
  --ts-display: 96px;
  --ts-display-xl: 160px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --cursor-blink: 1.06s;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-base: 220ms var(--ease-out);

  --z-base: 0;
  --z-nav: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-tooltip: 500;
}
