/* Design tokens shared by every stylesheet in css/. Change the look of the
   whole site by editing values here rather than hunting through components. */
:root {
  --color-bg: #0c0c0e;
  --color-surface: #111114;
  --color-surface-alt: #15151a;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-soft: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #f4f3f0;
  --color-text-soft: #d8d7d2;
  --color-text-muted: #a3a29c;
  --color-text-dim: #8a8984;
  --color-text-faint: #6f6f6a;

  --color-accent: #f4661e;
  --color-success: #22c07a;
  --color-error: #ff6b5e;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;

  --max-width: 1180px;
  --header-height: 66px;
  --gutter: 28px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --ease: 0.2s ease;
}