:root {
  /* Colour */
  --bg-0: #0A0908;
  --bg-1: #14110F;
  --bg-2: #1B1815;
  --bg-3: #221E1A;
  --border: rgba(255, 245, 230, 0.08);
  --border-strong: rgba(255, 245, 230, 0.16);
  --border-amber: rgba(255, 181, 71, 0.4);
  --text-1: #F8F4ED;
  --text-2: #9A938A;
  --text-3: #6B655E;
  --accent: #FFB547;
  --accent-deep: #E89938;
  --accent-soft: rgba(255, 181, 71, 0.12);
  --accent-glow: rgba(255, 181, 71, 0.35);
  --accent-glow-strong: rgba(255, 181, 71, 0.55);

  /* Typography */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-xl: clamp(56px, 9vw, 120px);
  --text-l: clamp(40px, 6vw, 80px);
  --text-m: clamp(28px, 3.5vw, 44px);
  --text-s: clamp(20px, 2.2vw, 28px);
  --text-body-l: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-eyebrow: 12px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Radius */
  --r-1: 2px;
  --r-2: 8px;
  --r-3: 16px;
  --r-4: 24px;
  --r-pill: 999px;

  /* Motion */
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 480ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --container: 1280px;
  --container-narrow: 920px;
  --nav-height: 72px;
  --nav-height-shrunk: 56px;

  /* Z-layers */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;

  color-scheme: dark;
}