:root {
  /* Foxglove palette — single source of colour truth */
  --ww-foxglove: #B43A7E;
  --ww-lilac-haze: #E8D8F0;
  --ww-slate: #3A3F4A;
  --ww-apricot: #F0A852;
  --ww-cream: #FBF7EF;

  /* Semantic roles */
  --ww-bg: var(--ww-cream);
  --ww-bg-sunk: var(--ww-lilac-haze);
  --ww-ink: var(--ww-slate);
  --ww-route: var(--ww-foxglove);
  --ww-link: var(--ww-foxglove);
  --ww-active: var(--ww-foxglove);
  --ww-signal: var(--ww-apricot);
  --ww-paper: var(--ww-cream);

  /* Legacy website v1 palette — reference only, do not use in new UI */
  --ww-legacy-bg: #F6F5F1;
  --ww-legacy-bg-sunk: #EFEDE5;
  --ww-legacy-ink: #1F3A5F;
  --ww-legacy-water: #6F93A8;
  --ww-legacy-accent-red: #C94F3D;

  /* Type */
  --ww-font-display: "Sohne", "Space Grotesk", "Aptos", ui-sans-serif, system-ui, sans-serif;
  --ww-font-body: "Sohne", "Inter", "Aptos", ui-sans-serif, system-ui, sans-serif;
  --ww-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --ww-container-max: 1360px;
  --ww-gutter-desktop: 48px;
  --ww-gutter-tablet: 32px;
  --ww-gutter-mobile: 20px;

  --ww-radius-card: 8px;
  --ww-rule-width: 1px;
  --ww-focus-ring: 0 0 0 3px rgba(180, 58, 126, 0.32);

  --ww-section-pad-y-desktop: 72px;
  --ww-section-pad-y-mobile: 44px;
  --ww-section-index-col: 220px;
  --ww-section-gap: 48px;

  /* Route diagram */
  --ww-route-spine-width: 14px;
  --ww-route-line-diagram-width: 8px;
  --ww-route-node-terminus: 22px;
  --ww-route-node-major: 10px;
  --ww-route-node-mid: 6px;
}

body {
  background: var(--ww-bg);
  color: var(--ww-ink);
  font-family: var(--ww-font-body);
}

.ww-display {
  font-family: var(--ww-font-display);
}

.ww-mono {
  font-family: var(--ww-font-mono);
}