:root {
  
  --blue: #123a78;
  --blue-900: #0e2f63;
  --blue-950: #0a2650;
  --accent: #1959a8;
  --accent-light: #9fc5f0;
  --ink: #16181a;
  --body: #43484c;
  --muted: #62676b;
  --paper: #ffffff;
  --paper-2: #fafaf9;
  --line: #ececea;
  --line-soft: #f0f0ee;
  /* The edge of a form control: 3:1 against white (WCAG 1.4.11), where the
     decorative --line above is 1.2:1. */
  --line-strong: #8c9197;
  --error: #b3261e;
  /* Hover/pressed state of an --error ground. */
  --error-dark: #7a1611;

  /* Site frame: the top bar and the footer share one dark band, the header
     and its dropdowns share one light tint, the page between them is white. */
  --chrome-bar: var(--blue);
  --chrome-bar-ink: rgba(255, 255, 255, 0.8);
  --chrome-bar-strong: #ffffff;
  --chrome-bar-line: rgba(255, 255, 255, 0.45);
  /* Plain colours, not color-mix(): browsers before 2023 (Chrome 109 is the
     last one on Windows 7/8) drop a color-mix() token, which left the header
     white and the dropdown transparent. Accent #1959a8 at 6% and 16% on white. */
  --chrome-tint: #f1f5fa;
  --chrome-tint-line: #dae4f1;

  /* Translucent brand colours for shadows, gradients and overlays. The
     suffix is the opacity in per cent; --blue-shadow is the deep navy ink of
     the long card shadows (#04122a), a darker relative of --blue. Alpha is
     baked in rather than added with color-mix(), for the reason above.
     GET /theme.css redefines every brand token in this block and the ones
     above from the colours chosen in the admin panel (src/config/theme.js).
     These literals are the defaults, and what a page falls back to if that
     stylesheet fails to load. */
  --blue-a12: rgba(18, 58, 120, 0.12);
  --blue-a16: rgba(18, 58, 120, 0.16);
  --blue-a28: rgba(18, 58, 120, 0.28);
  --blue-a50: rgba(18, 58, 120, 0.5);
  --blue-a90: rgba(18, 58, 120, 0.9);
  --blue-950-a08: rgba(10, 38, 80, 0.08);
  --blue-950-a10: rgba(10, 38, 80, 0.1);
  --blue-950-a18: rgba(10, 38, 80, 0.18);
  --blue-950-a35: rgba(10, 38, 80, 0.35);
  --blue-950-a45: rgba(10, 38, 80, 0.45);
  --blue-950-a50: rgba(10, 38, 80, 0.5);
  --blue-950-a92: rgba(10, 38, 80, 0.92);
  --blue-shadow-a14: rgba(4, 18, 42, 0.14);
  --blue-shadow-a22: rgba(4, 18, 42, 0.22);
  --blue-shadow-a45: rgba(4, 18, 42, 0.45);
  --blue-shadow-a60: rgba(4, 18, 42, 0.6);
  --blue-shadow-a70: rgba(4, 18, 42, 0.7);
  --accent-light-a55: rgba(159, 197, 240, 0.55);

  /* The body typeface. /theme.css swaps it for the device's own system
     stack when the admin panel says so. */
  --font-body: 'Commissioner', system-ui, -apple-system, sans-serif;

  
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 22px;
  --space-7: 28px;
  --space-8: 44px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 60px;

  
  --container: 1180px;
  --radius: 0;

  
  --fs-h1: 60px;
  --fs-h2-section: 38px;
  --fs-h2-news: 34px;
  --fs-menu-index: 23px;
  --fs-tagline: 22px;
  --fs-card-title: 19px;
  --fs-text: 16.5px;
  --fs-button: 14.5px;
  --fs-nav: 14px;
  /* Navigation, sized against the 16.5px body text: the main menu, its
     dropdowns and the section side menu read as part of the same page. */
  --fs-nav-main: 16px;
  --fs-nav-sub: 16px;
  --fs-nav-side: 15.5px;
  --fs-meta-lg: 12.5px;
  --fs-meta-sm: 11.5px;

  
  --lh-h1: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.35;
  --lh-text: 1.7;

  
  --ls-heading: -0.03em;
  --ls-h3: -0.02em;
  --ls-overline: 0.16em;
  --ls-filetype: 0.05em;

  
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
}


:root[data-theme='low-vision'] {
  --paper: #000000;
  --paper-2: #000000;
  --ink: #ffffff;
  --body: #ffffff;
  --muted: #ffffff;
  --blue: #ffdd00;
  --blue-900: #ffdd00;
  --blue-950: #ffdd00;
  
  --accent: #ffdd00;
  --accent-light: #ffdd00;
  --line: #ffdd00;
  --line-soft: #ffdd00;
  --line-strong: #ffdd00;

  --error: #ffdd00;
  --error-dark: #ffffff;

  --chrome-bar: #000000;
  --chrome-bar-ink: #ffffff;
  --chrome-bar-strong: #ffffff;
  --chrome-bar-line: #ffdd00;
  --chrome-tint: #000000;
  --chrome-tint-line: #ffdd00;

  /* Translucent brand colours: no navy shadow or overlay survives on black.
     Shadows and photo scrims go transparent, the two that mark an edge or a
     hover turn yellow, and the lightbox backdrop stays a dark veil. */
  --blue-a12: transparent;
  --blue-a16: rgba(255, 221, 0, 0.16);
  --blue-a28: rgba(255, 221, 0, 0.28);
  --blue-a50: transparent;
  --blue-a90: transparent;
  --blue-950-a08: transparent;
  --blue-950-a10: transparent;
  --blue-950-a18: transparent;
  --blue-950-a35: transparent;
  --blue-950-a45: transparent;
  --blue-950-a50: transparent;
  --blue-950-a92: rgba(0, 0, 0, 0.92);
  --blue-shadow-a14: transparent;
  --blue-shadow-a22: transparent;
  --blue-shadow-a45: transparent;
  --blue-shadow-a60: transparent;
  --blue-shadow-a70: transparent;
  --accent-light-a55: rgba(255, 221, 0, 0.55);

  /* The whole type scale, not only the root size: every size above is in px,
     so a root font-size alone enlarges nothing. Body text 20px, navigation
     19px, meta lines 14-15px; headings grow a little less, since they are
     already large. Sizes written as literals in the component files are
     raised in base.css. */
  --fs-h1: 68px;
  --fs-h2-section: 44px;
  --fs-h2-news: 40px;
  --fs-menu-index: 27px;
  --fs-tagline: 26px;
  --fs-card-title: 23px;
  --fs-text: 20px;
  --fs-button: 17.5px;
  --fs-nav: 17px;
  --fs-nav-main: 19px;
  --fs-nav-sub: 19px;
  --fs-nav-side: 19px;
  --fs-meta-lg: 15px;
  --fs-meta-sm: 14px;

  --lh-h1: 1.1;
  --lh-h2: 1.15;
  --lh-h3: 1.4;
  --lh-text: 1.75;
  font-size: 20px;
}