: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;

  /* «Класична» (shkilna): the light-grey ground the white page sits on, the
     school-yellow rule under the menu bar (never text: 1.7:1 on white, 4.9:1
     on the school blue) and the template's ink. Not brand colours: no
     setting changes them. */
  --shkilna-ground: #f2f4f7;
  --shkilna-gold: #f2c200;
  --shkilna-ink: #1e2329;
  /* The hairline round a white panel on that ground. */
  --shkilna-hairline: #d3d9e1;

  /* 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);
  /* The keyboard focus ring, one `outline` value: the ring on the page's light grounds, and the
     ring of the dark bands (white and a pixel thicker, with an offset of 3px instead of 2px). */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-on-dark: 3px solid var(--chrome-bar-strong);
  /* 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;

  /* «Портал»'s signage («Табло»): the sign ground is the school's primary
     colour with white letters; the signal yellow is a sign ground for black
     letters only and the «you are here» marker; the quiet grey grounds a
     secondary sign; the ink is the text of the plain information. Not
     settings beyond the primary: no school colour changes the rest. */
  --portal-sign: var(--blue);
  --portal-sign-ink: #ffffff;
  --portal-sign-edge: transparent;
  --portal-signal: #ffc20e;
  --portal-signal-ink: #111111;
  --portal-quiet: #e5e7eb;
  --portal-ink: #111111;

  /* «Вітрина»'s catalogue: the sky ground, the ink of its text and one colour
     per kind of content — the edge of its cards, the ground of its tiles and
     the text on that ground. Yellow is only ever an edge or a ground (ink on
     it 10.4:1), never text on white; the events' text ground is a deeper
     green than their edge (white on it 5.9:1). Not settings. */
  --kat-sky: #ddf0ff;
  --kat-ink: #14213d;
  --kat-yellow: #ffc93c;
  --kat-on-yellow: #14213d;
  --kat-news: #1d4ed8;
  --kat-news-ground: #1d4ed8;
  --kat-event: #1f8a5b;
  --kat-event-ground: #17734b;
  --kat-doc: #c8283c;
  --kat-doc-ground: #c8283c;
  --kat-album: #ffc93c;
  --kat-album-ground: #ffc93c;
  --kat-album-on: #14213d;
  --kat-page: #14213d;
  --kat-page-ground: #14213d;
  --kat-on-ground: #ffffff;

  /* «Афіша»'s poster colours, beside the school's primary: amber is only
     ever a ground (ink on it 9.7:1), never text on white; fog is the light
     band; ink is the dark text. Not settings: no school colour changes them. */
  --poster-amber: #ffb000;
  --poster-fog: #dde3ee;
  --poster-ink: #10162f;
  --poster-on-amber: #10162f;

  /* «Стенд»'s cork board: the wall's ground and its grain, the two pin
     colours, and the warm shadow a paper note casts on cork. Text never sits
     on the cork itself (ink on it would still be 5.4:1). Not settings: no
     school colour changes them. */
  --cork: #b98a5a;
  --cork-grain-dark: rgba(92, 58, 26, 0.2);
  --cork-grain-light: rgba(255, 238, 210, 0.18);
  --pin-red: #d33a2c;
  --pin-blue: #2563eb;
  --pin-shine: rgba(255, 255, 255, 0.7);
  --note-shadow: rgba(46, 26, 8, 0.38);
  --note-shadow-soft: rgba(46, 26, 8, 0.2);
  /* The blue lines of a ruled sheet. */
  --note-rule: #d3e1f4;

  /* «Зошит»'s lecture notebook: the white sheet, the pale blue ruling (a
     decoration only — no text depends on it), the red margin line (never
     text), the ink of the text and the grey ink of its notes (7.5:1 on
     white). Not settings: no school colour changes them. */
  --zoshyt-paper: #ffffff;
  --zoshyt-rule: #cfe0f5;
  --zoshyt-margin: #d9534f;
  --zoshyt-ink: #1d2433;
  --zoshyt-ink-2: #4b5563;

  /* «Панорама» («Горизонт»): the ink of its type, the cool fog of its quiet
     grounds (the footer, a hovered row) and that fog's edge. Not settings:
     the photo strip and the school's colours carry the colour. */
  --panorama-ink: #1c1f23;
  --panorama-fog: #eef1f3;
  --panorama-fog-line: #d9dee2;

  /* «Газета»'s newsprint, beside the school's two colours: the ink of the
     text and the rules, the grey of meta lines (8:1 on white) and the grey of
     the hairlines between columns (decorative only, never a control's edge).
     Not settings: no school colour changes them. */
  --news-ink: #111418;
  --news-grey: #4a4f57;
  --news-rule: #c8cbd0;

  /* 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-phone: 24px;
  --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: 15px;
  --fs-nav: 15px;
  /* 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: 14px;
  --fs-meta-sm: 14px;

  
  --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;
  --shkilna-ground: #000000;
  --shkilna-gold: #ffdd00;
  --shkilna-ink: #ffffff;
  --shkilna-hairline: #ffdd00;

  --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 signs black with a yellow edge and white letters, the
     signal yellow with black letters, no grey grounds. */
  --portal-sign: #000000;
  --portal-sign-ink: #ffffff;
  --portal-sign-edge: #ffdd00;
  --portal-signal: #ffdd00;
  --portal-signal-ink: #000000;
  --portal-quiet: #000000;
  --portal-ink: #ffffff;

  /* The catalogue: every edge yellow, every tile black with white text, so
     each card still reads as a shape and no kind is told by colour alone. */
  --kat-sky: #000000;
  --kat-ink: #ffffff;
  --kat-yellow: #ffdd00;
  --kat-on-yellow: #000000;
  --kat-news: #ffdd00;
  --kat-news-ground: #000000;
  --kat-event: #ffdd00;
  --kat-event-ground: #000000;
  --kat-doc: #ffdd00;
  --kat-doc-ground: #000000;
  --kat-album: #ffdd00;
  --kat-album-ground: #000000;
  --kat-album-on: #ffffff;
  --kat-page: #ffdd00;
  --kat-page-ground: #000000;
  --kat-on-ground: #ffffff;

  /* The posters: the amber ground turns yellow with black text on it. */
  --poster-amber: #ffdd00;
  --poster-fog: #000000;
  --poster-ink: #ffffff;
  --poster-on-amber: #000000;

  /* The cork board: a plain black wall, yellow pins, no shadows. */
  --cork: #000000;
  --cork-grain-dark: transparent;
  --cork-grain-light: transparent;
  --pin-red: #ffdd00;
  --pin-blue: #ffdd00;
  --pin-shine: #ffdd00;
  --note-shadow: transparent;
  --note-shadow-soft: transparent;
  --note-rule: transparent;

  /* «Зошит»: no ruling, the margin line yellow, the ink white on black. */
  --zoshyt-paper: #000000;
  --zoshyt-rule: transparent;
  --zoshyt-margin: #ffdd00;
  --zoshyt-ink: #ffffff;
  --zoshyt-ink-2: #ffffff;

  /* «Панорама»: white type, black grounds with a yellow edge. */
  --panorama-ink: #ffffff;
  --panorama-fog: #000000;
  --panorama-fog-line: #ffdd00;

  /* The newsprint: white text, yellow rules. */
  --news-ink: #ffffff;
  --news-grey: #ffffff;
  --news-rule: #ffdd00;

  /* 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 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-phone: 30px;
  --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: 15px;

  --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;
  /* No negative tracking: at -0.03em the word spaces of Commissioner's heavy
     weights nearly close at this size. */
  --ls-heading: 0;
  --ls-h3: 0;
  --radius: 0;
  --radius-button: 0;
  --radius-media: 0;
}