/* Design tokens: every colour, size and timing on the site comes from here. */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #06070a;
  --bg-raise: #0c0e13;
  --glass-top: rgba(255, 255, 255, 0.075);
  --glass-bottom: rgba(255, 255, 255, 0.028);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-strong: rgba(255, 255, 255, 0.09);

  /* text */
  --ink: #f4f6f9;
  --ink-2: #b1b8c5;
  --ink-3: #838b9a;

  /* meaning */
  --x: #ff3d4f;
  --x-ink: #ff7a86;
  --x-soft: rgba(255, 61, 79, 0.14);
  --amber: #ffb224;
  --amber-ink: #ffc65c;
  --amber-soft: rgba(255, 178, 36, 0.13);
  --steel: #8fa3bf;
  --steel-soft: rgba(143, 163, 191, 0.13);
  --up: #5fd6a4;

  /* type */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-display: clamp(2.1rem, 1.4rem + 3.4vw, 4.25rem);

  /* space (4px rhythm) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-16: 64px;

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* motion */
  --fast: 160ms;
  --base: 260ms;
  --slow: 520ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.2, 1.3, 0.3, 1);

  /* layers */
  --z-web: 1;
  --z-ui: 10;
  --z-nav: 40;
  --z-toast: 100;

  --nav-h: 56px;
  --gutter: clamp(16px, 2.2vw, 28px);
}