:root {
  /* Colour — backgrounds (light tonal tiers) */
  --color-bg-base: #F7F8FA;
  --color-bg-mid: #ECEDEF;
  --color-bg-raised: #E5E7EB;
  --color-nav-solid: #0C0D10;

  /* Colour — brand accents (glow/highlight/focal use only, never large fills) */
  --color-cobalt: #2A6FDB;
  --color-cobalt-soft: rgba(42, 111, 219, 0.25);
  --color-orange: #FF914D;
  --color-orange-soft: rgba(255, 145, 77, 0.35);

  /* Colour — text (light mode: dark on light) */
  --color-text: #14161A;
  --color-white: #F4F5F7;
  --color-grey-mid: #5A5E66;
  --color-grey-dim: #8C9099;

  /* Colour — separators */
  --color-line: rgba(20, 24, 32, 0.10);

  /* Type scale (base 16px) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 3rem;
  --text-3xl: 4rem;
  --text-hero: clamp(4rem, 9vw, 10rem);

  /* Type faces — sitewide 4-font system.
     Headers: Open Sauce One Bold (700). Body: Open Sans Regular (400).
     CTA / nav / directory / "go-away" links: IBM Plex Sans Semi Bold (600).
     Small / detail / label text: Open Sauce One Light (300). */
  --font-heading: "Open Sauce One", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --font-cta: "IBM Plex Sans", sans-serif;
  --font-detail: "Open Sauce One", sans-serif;

  /* Spacing — 4px base unit */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* Radius — deliberate, not default */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Layout */
  --content-max: 1200px;

  /* Motion — shared easing tokens */
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
}