:root {
  color-scheme: light;

  /* Typography from the WPP production SCSS. */
  --font-heading: "Montserrat Variable", Montserrat, Arial, sans-serif;
  --font-body: "Open Sans Variable", "Open Sans", Arial, sans-serif;

  /* WPP light-theme semantic roles selected from the supplied palette. */
  --color-page: #f6f7f8;
  --color-surface: #ffffff;
  --color-surface-alt: #e7eef4;
  --color-surface-strong: #d8eaf7;
  --color-surface-secondary: #eef0ff;
  --color-header: #e7eef4;
  --color-hero-start: #eef6fc;
  --color-hero-mid: #b8d7ec;
  --color-hero-end: #eef6fc;
  --color-hero-content: #f6f7f8;
  --color-hero-network: #0b4a72;
  --color-text: #1c1b1e;
  --color-text-muted: #33404a;
  --color-heading: #031b2b;
  --color-link: #052c44;
  --color-link-hover: #031b2b;
  --color-link-visited: #1c2847;
  --color-border: #596876;
  --color-focus: #0b4a72;
  --color-button: #052c44;
  --color-button-hover: #031b2b;
  --color-button-text: #ffffff;
  --color-button-secondary: transparent;
  --color-button-secondary-hover: #d8eaf7;
  --color-button-secondary-text: #052c44;
  --color-timeline-line: #33404a;
  --color-marker: #ffffff;
  --color-network: #33404a;
  --color-selection: #052c44;
  --color-selection-text: #ffffff;
  --shadow-card: 0 1.25rem 3rem rgb(3 27 43 / 24%), 0 0.25rem 0.75rem rgb(3 27 43 / 12%);
  --shadow-floating: 0 0.75rem 1.75rem rgb(3 27 43 / 22%);
  --shadow-panel: 0 1rem 3rem rgb(3 27 43 / 22%);
  --timeline-gradient: linear-gradient(180deg, #e7eef4 0%, #a9cbe2 50%, #e7eef4 100%);
  --timeline-gradient-reverse: linear-gradient(180deg, #d8eaf7 0%, #90b8d5 50%, #d8eaf7 100%);

  /* Layout */
  --content-width: 76rem;
  --reading-width: 48rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --radius-small: 0.5rem;
  --radius-medium: 0.875rem;
  --radius-large: 1.25rem;
  --radius-pill: 999rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: #151718;
  --color-surface: #1f2122;
  --color-surface-alt: #2b2d2e;
  --color-surface-strong: #33404a;
  --color-surface-secondary: #1c2847;
  --color-header: #33404a;
  --color-hero-start: #151718;
  --color-hero-mid: #052c44;
  --color-hero-end: #151718;
  --color-hero-content: #031b2b;
  --color-hero-network: #9dc6e6;
  --color-text: #eef0f1;
  --color-text-muted: #d4d8d9;
  --color-heading: #f7f9ff;
  --color-link: #d8eaf7;
  --color-link-hover: #f7f9ff;
  --color-link-visited: #e0e7fb;
  --color-border: #93a3b2;
  --color-focus: #9dc6e6;
  --color-button: #d8eaf7;
  --color-button-hover: #f7f9ff;
  --color-button-text: #031b2b;
  --color-button-secondary: transparent;
  --color-button-secondary-hover: #2b2d2e;
  --color-button-secondary-text: #d8eaf7;
  --color-timeline-line: #9dc6e6;
  --color-marker: #1f2122;
  --color-network: #d8eaf7;
  --color-selection: #d8eaf7;
  --color-selection-text: #031b2b;
  --shadow-card: 0 1.35rem 3.25rem rgb(0 0 0 / 60%), 0 0.25rem 0.9rem rgb(0 0 0 / 36%);
  --shadow-floating: 0 0.75rem 1.75rem rgb(0 0 0 / 46%);
  --shadow-panel: 0 1rem 3rem rgb(0 0 0 / 52%);
  --timeline-gradient: linear-gradient(180deg, #151718 0%, #052c44 50%, #151718 100%);
  --timeline-gradient-reverse: linear-gradient(180deg, #1f2122 0%, #0b4a72 50%, #1f2122 100%);
}

/* System-theme fallback when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-page: #151718;
    --color-surface: #1f2122;
    --color-surface-alt: #2b2d2e;
    --color-surface-strong: #33404a;
    --color-surface-secondary: #1c2847;
    --color-header: #33404a;
    --color-hero-start: #151718;
    --color-hero-mid: #052c44;
    --color-hero-end: #151718;
    --color-hero-content: #031b2b;
    --color-hero-network: #9dc6e6;
    --color-text: #eef0f1;
    --color-text-muted: #d4d8d9;
    --color-heading: #f7f9ff;
    --color-link: #d8eaf7;
    --color-link-hover: #f7f9ff;
    --color-link-visited: #e0e7fb;
    --color-border: #93a3b2;
    --color-focus: #9dc6e6;
    --color-button: #d8eaf7;
    --color-button-hover: #f7f9ff;
    --color-button-text: #031b2b;
    --color-button-secondary: transparent;
    --color-button-secondary-hover: #2b2d2e;
    --color-button-secondary-text: #d8eaf7;
    --color-timeline-line: #9dc6e6;
    --color-marker: #1f2122;
    --color-network: #d8eaf7;
    --color-selection: #d8eaf7;
    --color-selection-text: #031b2b;
    --shadow-card: 0 1.35rem 3.25rem rgb(0 0 0 / 60%), 0 0.25rem 0.9rem rgb(0 0 0 / 36%);
    --shadow-floating: 0 0.75rem 1.75rem rgb(0 0 0 / 46%);
    --shadow-panel: 0 1rem 3rem rgb(0 0 0 / 52%);
    --timeline-gradient: linear-gradient(180deg, #151718 0%, #052c44 50%, #151718 100%);
    --timeline-gradient-reverse: linear-gradient(180deg, #1f2122 0%, #0b4a72 50%, #1f2122 100%);
  }
}