: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;
  /* The visual editor's notices (story 24.3): «Увага» and «Вітаємо». The edge
     colour is also the title's, at 4.5:1 or more on its own ground. */
  --callout-warning: #8a5300;
  --callout-warning-bg: #fff6e5;
  --callout-success: #2d6a31;
  --callout-success-bg: #edf7ee;

  /* 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;
  /* The fills of the text palette's two school colours (story 32, B3): the
     primary and the accent at 16% on white (src/config/palette.js). */
  --primary-tint: #d9dfe9;
  --accent-tint: #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 text palette of the visual editor (story 32, B3,
     src/config/palette.js): eight named colours for a word, a highlight or
     a table cell, each 4.5:1 or more as text on white, and their fills —
     the colour at 16% on white. Not brand colours: no setting changes them.
     The school's own two are --blue/--accent with the tints above. */
  --pal-black: #1f2328;
  --pal-black-tint: #dbdcdd;
  --pal-grey: #5b6168;
  --pal-grey-tint: #e5e6e7;
  --pal-red: #b42318;
  --pal-red-tint: #f3dcda;
  --pal-orange: #9a4700;
  --pal-orange-tint: #efe2d6;
  --pal-green: #2b6a2f;
  --pal-green-tint: #dde7de;
  --pal-blue: #1757a6;
  --pal-blue-tint: #dae4f1;
  --pal-violet: #6a3d9e;
  --pal-violet-tint: #e7e0ef;
  --pal-brown: #7a4a1f;
  --pal-brown-tint: #eae2db;

  /* The typefaces of text and of headings (h1–h4 and the few heading-like
     classes base.css lists). /theme.css swaps either for another face of
     public/css/fonts.css, or the device's own system stack, when the admin
     panel says so. */
  --font-body: 'Commissioner', system-ui, -apple-system, sans-serif;
  --font-heading: '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;
  /* Corners: fields, cards and photo slots; buttons; photos framed on their
     own (a news card's, an album cover, the split first screen's). Square by
     default — /theme.css rounds them when the admin panel says so. */
  --radius: 0;
  --radius-button: 0;
  --radius-media: 0;

  
  --fs-h1: 60px;
  --fs-h1-phone: 44px;
  --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;

  
  /* Letter spacing of headings, tuned for Commissioner; /theme.css writes
     the heading face's own. */
  --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;
  --callout-warning: #ffdd00;
  --callout-warning-bg: #000000;
  --callout-success: #ffdd00;
  --callout-success-bg: #000000;

  --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 text palette: every coloured word yellow, every fill gone — the
     words keep their meaning (the text), not their colour. */
  --primary-tint: transparent;
  --accent-tint: transparent;
  --pal-black: #ffdd00;
  --pal-black-tint: transparent;
  --pal-grey: #ffdd00;
  --pal-grey-tint: transparent;
  --pal-red: #ffdd00;
  --pal-red-tint: transparent;
  --pal-orange: #ffdd00;
  --pal-orange-tint: transparent;
  --pal-green: #ffdd00;
  --pal-green-tint: transparent;
  --pal-blue: #ffdd00;
  --pal-blue-tint: transparent;
  --pal-violet: #ffdd00;
  --pal-violet-tint: transparent;
  --pal-brown: #ffdd00;
  --pal-brown-tint: transparent;

  /* 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-h1-phone: 50px;
  --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;

  /* The school's typefaces and corners do not reach this mode either: its
     type scale was tuned for Commissioner, and square edges read best at
     this contrast. The layout variants (header, first screen, footer) do
     apply — they are structure, not look. */
  --font-body: 'Commissioner', system-ui, -apple-system, sans-serif;
  --font-heading: 'Commissioner', system-ui, -apple-system, sans-serif;
  --ls-heading: -0.03em;
  --ls-h3: -0.02em;
  --radius: 0;
  --radius-button: 0;
  --radius-media: 0;
}