:root {
  /* surfaces: cool paper, white panels */
  --canvas: #eef1f5;
  --surface: #ffffff;
  --surface-sunk: #f6f8fa;
  --line: #e3e7ed;
  --line-strong: #cbd3dd;

  /* ink */
  --ink: #0d1b2a;
  --ink-2: #435468;
  --ink-3: #5c6d81;   /* 4.98:1 on --surface-sunk */

  /* meaning: deep water is the brand, orange is for action, green for dry */
  --brand: #0c447c;
  --brand-deep: #08304f;
  --brand-wash: #e7f0f9;
  --accent: #b94a1b;   /* white text on it: 5.17:1 */
  --accent-deep: #9c3e16;
  --accent-wash: #fbede6;
  --dry: #2f7a3d;
  --danger-wash: #fbe9e7;

  /* depth bands, shallow to deep: counter, adult, door, storey. Same values as BANDS in js/dom.js */
  --band-1: #c6e4ef;
  --band-2: #86c0db;
  --band-3: #2b77a7;
  --band-4: #1a5482;
  --band-5: #0b2f4c;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
  --text-figure: clamp(2rem, 1.4rem + 2.2vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --content-max: 76rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-md: 0 1px 2px rgba(13, 27, 42, 0.05), 0 12px 28px -14px rgba(13, 27, 42, 0.22);

  --duration-fast: 150ms;
  --duration-normal: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}