/* The app's design values. Components use these variables, never fixed colours or sizes.
   The pages inside take their colours, corners and drops from the kit the owner approved on the canvas on 30 Oct 2026
   (Task indoor, part a; docs/design/indoor/): a pale page, white cards with a line and a drop under them, navy words
   and buttons (yellow buttons in dark mode), teal for what's on. Their font and sizes are still the old Titrah site's
   (the owner, 16 Oct 2026; his choice of font waits). Since part b the top bar, the keys and the band are the kit's
   too, navy as the outdoor pages' (their --site-… tokens, below).
   A slide drawn on in the class (Task 7.15b, part 2) keeps these in dark mode too, as the board's page is white in
   both: a drawing shows the same on every screen. So does a slide shown in the course page's room (Task indoor, part f:
   white paper in both modes), and so does a lesson's slide in «المادة» and «تمارين» (part g). */
:root,
.cls-ink-sheet,
lecture-page.is-room .cslide-stage,
old-material-viewer .content-screen {
  /* the main button, a choice or a step that's chosen: navy (yellow in dark mode); the main button pointed at, and the
     drop under it */
  --color-primary: #002a40;
  --color-primary-strong: #0b3a55;
  --color-primary-drop: #00131f;
  --color-on-primary: #ffffff;
  /* the page, a card, a raised part inside a card (a table's head, a tile), a card's line, the line between rows inside
     a card, and the drop under a card or a white button */
  --color-bg: #eff3f8;
  --color-surface: #ffffff;
  --color-raised: #f6f9fb;
  --color-border: #d3e0ea;
  --color-rule: #e1eaf1;
  --color-drop: #d3e0ea;
  /* words: the text, its quieter tone (the line under a title, a number's name), its faint one (a hint, a date, a
     count's name), a link and a link pointed at */
  --color-text: #002a40;
  --color-quiet: #3d5266;
  --color-muted: #5e7184;
  --color-link: #0f5f66;
  --color-link-hover: #002a40;
  /* teal, for what's on: a meter, a stripe, a live dot, a switch that's on; its words and icons; the track of a meter
     and of a switch that's off */
  --color-on: #2ab4c0;
  --color-on-text: #0f7c86;
  --color-track: #d9e5ee;
  /* a switch that's on, and its knob, the same in both modes */
  --color-switch-on: #0f7c86;
  --color-switch-knob: #ffffff;
  --color-success: #0f7c86;
  --color-danger: #b3261e;
  /* filled red and teal (a wrong and a right answer's mark, a count on a white part): the same in both modes, with white
     words on them */
  --color-danger-fill: #b3261e;
  --color-correct-fill: #0f7c86;
  --color-on-fill: #ffffff;
  /* the keyboard's ring: navy, yellow in dark mode (yellow on the navy bar, nav-bar.css) */
  --color-focus: #002a40;
  /* the old site's blue header: the app's own header (base.css, under the top bar of every page now), «نظير»'s
     players and the course page's keys (old-course.css) */
  --color-header-bg: #006ca6;
  --color-header-text: #ffffff;
  /* the header's links, and the line under the one you hover */
  --color-header-link: #e2e2e2;
  --color-header-line: #fbf295;
  /* fields: a white box (the page's colour in dark mode) and a blue-grey line, which takes the text's colour on focus,
     with a teal ring (base.css) */
  --color-input-bg: #ffffff;
  --color-input-border: #c5d5e2;
  --color-input-focus: #002a40;
  /* message backgrounds, and the words on a done one */
  --color-danger-soft: #fdecea;
  --color-success-soft: #e3f5f6;
  --color-success-text: #0b4a50;
  --color-info-soft: #e3edf6;
  /* chips (base.css): teal, yellow and grey, each soft with its words; navy with white words */
  --color-chip-teal: #e3f6f7;
  --color-chip-teal-text: #0f5f66;
  --color-chip-yellow: #fdf6b5;
  --color-chip-yellow-text: #5c4a00;
  --color-chip-grey: #e8eff4;
  --color-chip-grey-text: #3d5266;
  --color-chip-navy: #12455f;
  --color-chip-navy-text: #ffffff;
  /* a hint: its amber, its line, its words and the edge at its start */
  --color-hint: #fdf0d5;
  --color-hint-line: #f3d79a;
  --color-hint-text: #7a4b00;
  --color-hint-edge: #f5b82e;
  /* the old site's red, for a card's heading until Task indoor (now the course page's, and a streak's mark); the right
     answer; a draft, in the hints' amber */
  --color-heading-accent: #e7505a;
  --color-correct: #0f7c86;
  --color-correct-soft: #e3f5f6;
  --color-draft: #7a4b00;
  --color-draft-soft: #fdf0d5;
  /* «رأيك»'s stars (Task feedback, part a2): a star lit, 3:1 or more on the cards */
  --color-star: #b07000;
  /* the dimmed page behind a window that opens on top (a revision card) */
  --color-backdrop: rgb(0 20 35 / 0.45);
  /* the live class dimmed under its side opened over it on a narrow screen, the old app's slate veil (Task 7.22, part e) */
  --color-side-scrim: rgb(65 77 88 / 0.3);
  /* the page's scroll bar as the old site's (course/basic.css; the owner, 26 Oct 2026): 10px, a light track and a grey
     thumb, the same in both modes, as the old site's were */
  --scrollbar-size: 10px;
  --color-scrollbar-track: #f5f6f9;
  --color-scrollbar-thumb: #d5dce4;
  /* behind a live picture (a trainer's camera, a screen shared) where it doesn't fill its place, in both modes */
  --color-picture-bg: #1d2329;
  /* the cameras' place in the live class, as the old app's (Task 7.22, part b2), the same in both modes: its slate, the
     words and buttons on it and on a picture, the keyboard's ring there, a picture's name strip, the mark of a microphone
     that's off, and the ring round a picture while its person talks */
  --color-cameras-bg: #5a6570;
  --color-cameras-text: #ffffff;
  --color-cameras-focus: #ffffff;
  --color-picture-tag-bg: rgb(10 14 24 / 0.6);
  --color-mic-off: #d32f2f;
  --color-talking: #6ee7a8;
  /* the live class in the course page's room (Task indoor, part f): the stage behind a slide, the line round the reader's
     own message, the line of a red button, and the cameras' column, navy (deeper in dark mode), its keys, their line and
     its words */
  --color-stage: #e6edf4;
  --color-chat-me-line: #bfe7ea;
  --color-danger-line: #f2c4c0;
  /* the drops under a right choice (teal) and a wrong one, and under a red key (Task indoor, part g) */
  --color-correct-drop: #0a5a61;
  --color-danger-drop: #7f1b15;
  --color-cams: #002a40;
  --color-cams-key: #0b3a55;
  --color-cams-line: #12405a;
  --color-cams-ink: #c4d8e6;
  /* the board in the class (Task 7.15a): its page, white in both modes as the meeting app's board, its lines and axes,
     its seven inks (the meeting app's), the laser, the name by a pen, and a text's outline, dark or light */
  --board-paper: #ffffff;
  --board-rule: #dfe4ea;
  --board-axis: #7a8794;
  --board-ink-red: #e5484d;
  --board-ink-amber: #f5a524;
  --board-ink-green: #2dbe6c;
  --board-ink-blue: #3e8ed0;
  --board-ink-purple: #9b5de5;
  --board-ink-white: #ffffff;
  --board-ink-black: #111827;
  --board-laser: #ff3b30;
  --board-tag-bg: rgb(10 14 24 / 0.8);
  --board-tag-text: #ffffff;
  --board-outline-dark: rgb(10 14 24 / 0.75);
  --board-outline-light: rgb(255 255 255 / 0.85);
  /* the drops under a card and a button, and how far a button moves down while pressed; a menu or a box over the page,
     and a window */
  --drop-card: 4px;
  --drop-button: 3px;
  --drop-press: 2px;
  --shadow-card: 0 var(--drop-card) 0 var(--color-drop);
  --shadow-button: 0 var(--drop-button) 0 var(--color-drop);
  --shadow-primary: 0 var(--drop-button) 0 var(--color-primary-drop);
  --shadow-raised: 0 0.75rem 1.75rem rgb(0 20 35 / 0.16);
  /* a slide's paper in the class (Task indoor part f, the Class board): a thin, faint drop */
  --shadow-paper: 0 0.125rem 0.25rem rgb(0 20 35 / 0.1);
  /* a lesson's slide in «المادة» (Task indoor part g, the Course board): a sheet over the stage, a line and a soft drop */
  --shadow-sheet: 0 0.125rem 0 #c9d6e2, 0 0.75rem 1.75rem rgb(0 20 35 / 0.1);
  --shadow-window: 0 1rem 1.875rem rgb(0 20 35 / 0.45);
  --shadow-knob: 0 1px 2px rgb(0 0 0 / 0.25);
  /* letters on a light highlight in docBuilder content, in both modes */
  --color-on-highlight: #1d2329;
  /* docBuilder content in dark mode (base.css), and in a slide drawn on in the class in both: as it was before Task
     indoor, its words, its quieter ones, its headings' blues, its lines and a table's head (the light ones here are a
     slide's, on its white paper) */
  --color-doc-text: #333333;
  --color-doc-muted: #777777;
  --color-doc-heading: #337ab7;
  --color-doc-heading-3: #286090;
  --color-doc-line: #c2cad8;
  --color-doc-head-bg: #e8f2fa;
  /* a drawing in docBuilder content (svgBuilder's black lines and words): as it is in light mode, turned round in dark
     mode so they show light, with the hue turned back (docContent.css does this for the old site's dark mode) */
  --drawing-filter: none;
  /* the old site's navigation's colours that the bar no longer uses (Task indoor, part b): its darker header blue
     («نظير»'s «ضد»), the course page's keys' icons on a phone and wider (old-course.css) */
  --color-header-bg-strong: #004469;
  --color-header-icon-muted: #689eba;
  --color-key-icon: #2ab4c0;
  /* on the navy bar (Task indoor, part b), the same in both modes: a group's name in a phone's panel and a key's in the
     bottom bar, and the soft yellow behind the chosen key's icon there */
  --color-bar-faint: #8fb0c5;
  --color-bar-chosen: rgb(251 242 149 / 0.16);
  /* on a band's navy (Task indoor, part c), the same in both modes: a link, and the flame of the days in a row; the
     flame on a white card (a deeper amber, the board's) */
  --color-navy-link: #7fdde4;
  --color-flame: #f5b82e;
  --color-flame-card: #f5a524;
  /* «التدريب» (Task indoor, part d): the level's steps (a step, its line, those below his level, one with no questions
     yet), and what's done or his own: his level's step and its number, a skill mastered (teal; in dark mode lighter,
     its number navy) */
  --color-step: #ffffff;
  --color-step-line: #b9cad8;
  --color-step-below: #a8dfe3;
  --color-step-empty: #c5d5e2;
  --color-done: #0f7c86;
  --color-on-done: #ffffff;
  /* a question's picture's paper, white in both modes; a letter's circle on a filled choice (Task indoor, part d) */
  --color-paper: #ffffff;
  --color-on-fill-soft: rgb(255 255 255 / 0.2);
  /* the page you are on in a menu's box */
  --color-current: #e3f6f7;
  /* «المجتمع» (Task indoor, part e): a trainer's or staff's letter, filled, and their badge (navy; in dark mode light, as
     the boards have them) */
  --color-staff: #002a40;
  --color-on-staff: #ffffff;
  /* «شهادة إتمام»'s sheet (Task certificates, part b): paper, the same in both modes and printed, as the board's page is:
     its paper, its words and its quieter words, the brand's blue of its title and frame, a gold line and the light line
     over its foot; its sizes are shares of its width (container units, 1cqi a hundredth of it), so it keeps its shape on
     a phone and prints the same on A4 */
  --cert-paper: #ffffff;
  --cert-ink: #1f2933;
  --cert-muted: #52606d;
  --cert-blue: #0b5c8e;
  --cert-gold: #b08d3c;
  --cert-line: #d9e2ec;
  /* the paper round the blue band (inside what a printer prints), the band, the gap to the gold line, the gold line */
  --cert-margin: 2.4cqi;
  --cert-band: 1.1cqi;
  --cert-gap: 1.1cqi;
  --cert-thin: 0.2cqi;
  --cert-pad-block: 2.2cqi;
  --cert-pad-inline: 4cqi;
  --cert-size-brand: 2cqi;
  --cert-size-title: 5.6cqi;
  --cert-size-text: 2cqi;
  --cert-size-small: 1.5cqi;
  --cert-size-name: 4.6cqi;
  --cert-size-name-long: 3.2cqi;
  --cert-size-name-en: 2.4cqi;
  --cert-size-name-en-long: 1.9cqi;
  --cert-size-course: 3.2cqi;
  --cert-size-course-long: 2.3cqi;
  --cert-robot: 5.6cqi;
  --cert-rule-width: 24cqi;
  /* its fit: 1, or lower while its words don't fit its page (the certificate's page sets it), and the width it's measured
     at, its printed one */
  --cert-scale: 1;
  --cert-printed-width: 297mm;

  --font-body: "Droid Arabic Kufi", Arial, "Segoe UI", Tahoma, sans-serif;
  --font-size-small: 0.8125rem;
  --font-size-body: 0.9375rem;
  /* a card's red heading, as the old site's portlet titles */
  --font-size-card-title: 1.0625rem;
  --font-size-title: 1.25rem;
  --font-size-stat: 2rem;
  /* a page's line under its title (Task landing's, since used by other pages) */
  --font-size-lead: 1.0625rem;
  --font-size-heading: 1.5rem;
  --line-height: 1.8;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  /* the landing page's bands (Task landing, landing.css) */
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* corners (Task indoor): a control's (a button, a field, a box inside a card), a small button's, a card's (16px on a
     phone, below), a window's, and a pill's (a chip, a key). What must stay square (a table's cells, the board, an ink
     sheet) says so where it is drawn */
  --radius: 12px;
  --radius-small: 10px;
  --radius-card: 18px;
  --radius-window: 20px;
  --radius-pill: 999px;
  /* paper keeps the old site's 4px: the class's board and a certificate's sheet */
  --radius-paper: 4px;
  /* the landing page's question and the sign-in pages' frame (Task landing) */
  --radius-large: 12px;
  --content-width: 60rem;
  --card-width: 28rem;
  /* the question list and editor are wider than the other pages */
  --wide-width: 90rem;
  /* the top bar (Task indoor, part b: the kit's 64px), and on a phone (under 768px) 56px; the room left under a page
     for its keys bar there */
  --header-height: 4rem;
  --header-height-phone: 3.5rem;
  /* the course page's line (Task indoor part f): its height with the rule under it, in one row and in two (under
     768px); the keys' bar at a phone's foot under it, and the room an installed app keeps under the keys (the old room's) */
  --course-line-height: 3.4375rem;
  --course-line-height-narrow: 6.0625rem;
  --course-keys-bar-phone: 4.3125rem;
  --course-keys-installed: 1.25rem;
  /* «شارك» and «المادة» (part g): the feed's column (with its 24px sides), the lesson index's width, the slide's, the round
     keys of the feed's strip and the viewer's (46px), the taps (44px), the round clip and the tray's keys (42px), and the
     red count (20px) */
  --course-feed: 45rem;
  --course-index: 18.75rem;
  --course-sheet: 37.5rem;
  --course-key: 2.875rem;
  --course-tap: 2.75rem;
  --course-round: 2.625rem;
  --course-count: 1.25rem;
  --view-keys-room: 5rem;
  /* the top bar's robot and the app's name by it (a phone's), its round buttons («؟», the bell, ☰, «حسابك»), the first
     letter of a name in a circle (larger in «حسابك»'s box) */
  --bar-robot: 3rem;
  --bar-robot-phone: 2.5rem;
  --font-size-brand: 1.1875rem;
  --font-size-brand-phone: 1.0625rem;
  --bar-control: 2.75rem;
  --avatar: 2rem;
  --avatar-large: 2.5rem;
  /* a main page's navy band (components/page-band.js): its title (a phone's is --font-size-heading) and its robot (a
     phone's); a work page's head (components/work-head.js): its title's icon; a page's state, empty, waiting or done
     (components/page-state.js): its robot (a phone's) and the lines that shimmer while it waits */
  --font-size-band: 1.75rem;
  --band-robot: 6.5rem;
  --band-robot-phone: 4rem;
  --head-icon: 1.625rem;
  --state-robot: 7.5rem;
  --state-robot-phone: 6.5rem;
  --skeleton-height: 0.75rem;
  /* a number's tile on a band's navy (page-band.js's stats), its icon and its number (a phone's) */
  --tile-height: 3.75rem;
  --tile-icon: 1.625rem;
  --tile-icon-phone: 1.5rem;
  --font-size-tile: 1.375rem;
  --font-size-tile-phone: 1.25rem;
  /* «الرئيسية» (Task indoor, part c; the boards Home and Home-phone): its side column, the robot of its band (narrower,
     and a phone's), «خطتي اليوم»'s facts (their least height, a number, the days left; a phone's), a line's round mark
     and its icon, a day of its week (a phone's, the narrowest phones') and the week's width at most on a phone, a link's
     row in «روابط», and a small icon (a link's arrow, a day's mark) */
  --home-side: 23.125rem;
  --band-robot-home: 9.375rem;
  --band-robot-home-narrow: 6rem;
  --band-robot-home-phone: 4.75rem;
  --fact-height: 6rem;
  --fact-height-phone: 5.25rem;
  --font-size-fact: 1.75rem;
  --font-size-fact-phone: 1.5rem;
  --font-size-days: 2.75rem;
  --font-size-days-phone: 2.625rem;
  --plan-mark: 2.375rem;
  --plan-mark-phone: 2.125rem;
  --plan-mark-icon: 1.1875rem;
  --plan-day: 2rem;
  --plan-day-phone: 2.125rem;
  --plan-day-narrow: 1.75rem;
  --plan-week-phone: 26rem;
  --link-row: 2.75rem;
  --icon-small: 1rem;
  /* the dot that pulses by «مباشرة الآن» */
  --live-dot: 0.5rem;
  /* «التدريب» (Task indoor, part d; the boards Learn and Learn-phone): the robot of its band on a narrower screen; a
     field's mark and a card's that links (their icon; a phone's), a skill's and a course's (their icon; a phone's); a
     skill's small level step (its width and corners) and a level step's line */
  --band-robot-narrow: 4.5rem;
  --mark-big: 2.875rem;
  --mark-big-phone: 2.625rem;
  --mark-big-icon: 1.5rem;
  --mark-big-icon-phone: 1.375rem;
  --mark: 2.625rem;
  --mark-phone: 2.375rem;
  --mark-icon: 1.25rem;
  --mark-icon-phone: 1.125rem;
  --step-small: 0.625rem;
  --radius-step: 3px;
  --step-line: 1.5px;
  /* «المجتمع» (Task indoor, part e; the boards Community, Community-phone and Community-circles): its side's width, and
     a post's page's column (the feed's posts' width); a small letter (a comment's, the members' row, a phone's
     composer), ⋮ and a composer's box and a poll's choice; a part inside a card (a question's box, a circle in the
     side, an achievement's tile) and a circle's mark in the side; a circle's mark in its page's band (its icon, its
     corners; a phone's); the week's goal in big figures */
  --cm-side: 21.25rem;
  --cm-feed: 49.5rem;
  --cm-letter-small: 2.25rem;
  --cm-dots: 2.375rem;
  --cm-row: 2.875rem;
  --radius-inner: 14px;
  --cm-circle-mark: 2.375rem;
  --band-mark: 5.5rem;
  --band-mark-icon: 2.75rem;
  --band-mark-phone: 3.5rem;
  --band-mark-icon-phone: 1.75rem;
  --radius-mark: 24px;
  --font-size-goal: 1.75rem;
  /* a question (the boards Learn-q, Learn-q-more and Learn-q-phone): the level column (narrower), the question's width
     at most; the panel's lowest step and how much each rises (a phone's); a choice's least height and its letter; a big
     button's least width («أجب», «السؤال التالي»); the hint's toast and its edge; the explanation's window; the revision
     cards' button; the counts' words on a phone */
  --learn-panel: 17.5rem;
  --learn-panel-narrow: 15rem;
  --learn-stage: 55rem;
  --rung: 1.875rem;
  --rung-rise: 0.5rem;
  --rung-phone: 1.75rem;
  --rung-rise-phone: 0.375rem;
  --option-height: 3.25rem;
  --letter: 1.875rem;
  --button-big: 10.625rem;
  --learn-toast: 23.75rem;
  --hint-edge: 5px;
  --window-explain: 40rem;
  --fold-height: 3.5rem;
  --font-size-tiny: 0.6875rem;
  /* buttons and fields: a little taller than the old site's 34px, so they are still easy to tap */
  --control-height: 2.5rem;
  /* a small button (Task indoor); a chip's height, a switch's (its width, its knob and the gap round it), a meter's */
  --control-height-small: 2.25rem;
  --chip-height: 1.625rem;
  --switch-width: 2.75rem;
  --switch-knob: 1.25rem;
  --switch-gap: 3px;
  --meter-height: 0.5rem;
  /* the landing page's buttons and choices (Task landing) */
  --control-height-large: 3rem;
  /* the app's robot (Task landing): on the landing page's question, and by the name on the sign-in pages */
  --logo-size-large: 4.5rem;
  --logo-size: 2.5rem;
  /* «نظير»'s characters (its avatars, as large as the robot in the top bar was until Task indoor, part b) */
  --logo-size-bar: 3.75rem;
}

/* words on the class's stage, around a slide's paper (Task indoor part f: «القلم مع المدرّب الآن.» over the paper):
   :root's alone, so the paper's own light tokens don't reach them (dark mode's below) */
:root {
  --color-stage-text: #3d5266;
}

/* a card's corners on a phone (Task indoor) */
@media (max-width: 40rem) {
  :root,
  .cls-ink-sheet {
    --radius-card: 16px;
  }
}

/* The outdoor pages (Task site) draw their own parts with the --site-… tokens (site.css); the app's parts they show (a
   form's fields, buttons and messages, «رسائلي», a shared report, a course's registration) keep their look from before
   Task indoor, and so does the builders' page's own part (#body, its page: Task 1.2d). Inside them the app's tokens
   keep their old values, the old Titrah site's; what the kit added takes the value its place had before (teal for
   what's on and links the old blue, quieter words the muted grey, a raised part nothing); the kit's drops, its press
   and its corners are none, and 4px. Dark mode's in the block below. */
.site,
#body {
  --color-primary: #337ab7;
  --color-primary-strong: #286090;
  --color-on-primary: #ffffff;
  --color-border: #d8d8d8;
  --color-text: #333333;
  --color-muted: #777777;
  --color-quiet: #777777;
  --color-link: #337ab7;
  --color-link-hover: #337ab7;
  --color-on: #337ab7;
  --color-on-text: #337ab7;
  --color-raised: transparent;
  --color-success: #1e7d4f;
  --color-success-text: #1e7d4f;
  --color-danger-fill: #b3261e;
  --color-correct-fill: #0f7c86;
  --color-on-fill: #ffffff;
  --color-focus: #2f80ed;
  --color-input-bg: #f7f7f7;
  --color-input-border: #c2cad8;
  --color-input-focus: #93a1bb;
  --color-success-soft: #e7f5ed;
  --color-info-soft: #e8f2fa;
  --color-draft: #7a5300;
  --color-draft-soft: #fff4d6;
  --color-backdrop: rgb(0 0 0 / 0.45);
  --shadow-raised: 0 0.5rem 2rem rgb(0 0 0 / 0.25);
  --shadow-card: none;
  --shadow-button: none;
  --shadow-primary: none;
  --drop-press: 0px;
  --radius: 4px;
  --radius-small: 4px;
  --radius-card: 4px;
  --radius-window: 4px;
}

/* The outdoor pages (Task site; the design the owner approved on the canvas on 29 Oct 2026, docs/design/site/): their
   own colours, sizes and font, used by site.css and its pages; the pages inside use their navy, yellow and teal too
   where they are the same (Task indoor: a yellow button on navy, base.css; since part b the top bar signed in, on the
   column of the visitors' bar, the keys and the band, nav-bar.css and base.css). Navy for the top of every page, its
   dark bands and its foot (the same in both modes); white and pale bands that turn dark in dark mode; yellow for the
   main buttons and a band near the end; teal; and the robot's own colours, in three coats, by the part it stands on
   (white on navy, navy and teal on a white or pale part, teal on the yellow band; dark mode's in the block below). */
:root {
  --font-site: "Noto Kufi Arabic", "Droid Arabic Kufi", Arial, Tahoma, sans-serif;
  /* the navy parts: the page's top and its dark bands, the bar, the foot, and what's on them */
  --site-navy: #002a40;
  --site-navy-card: #0b3a55;
  --site-navy-line: #12405a;
  --site-navy-edge: #2d5a73;
  --site-navy-text: #c4d8e6;
  --site-navy-title: #ffffff;
  --site-navy-hover: rgb(255 255 255 / 0.12);
  /* under the big robot, and under what opens over the page */
  --site-navy-shade: #00131f;
  --site-navy-shadow: 0 1rem 1.875rem rgb(0 20 35 / 0.45);
  /* the white and pale bands, the cards on them, their lines, their words and quieter words, links, errors */
  --site-band: #ffffff;
  --site-band-pale: #eff3f8;
  --site-card: #ffffff;
  --site-line: #d3e0ea;
  --site-ink: #002a40;
  --site-ink-quiet: #3d5266;
  --site-teal-text: #0f7c86;
  --site-link: #002a40;
  --site-link-hover: #004469;
  --site-error: #b3261e;
  /* a link pointed at on a white part (the «الصفحة غير موجودة» card's) */
  --site-hover: #eff3f8;
  /* the keyboard's ring: yellow on navy, navy on a white part */
  --site-focus: #fbf295;
  --site-focus-light: #002a40;
  /* yellow: the main buttons and their shadow, what's on them, and the band near the end (its title and words) */
  --site-yellow: #fbf295;
  --site-yellow-shadow: #c9bf5c;
  --site-on-yellow: #002a40;
  --site-yellow-band: #fbf295;
  --site-yellow-band-title: #002a40;
  --site-yellow-band-text: #3d4a55;
  /* teal, and its shadow under a white card on navy */
  --site-teal: #2ab4c0;
  --site-teal-shadow: #1b8f99;
  /* what the robot says: its bubble */
  --site-bubble: #ffffff;
  --site-bubble-text: #002a40;
  --site-bubble-shadow: 0 0.5rem 1.5rem rgb(0 20 35 / 0.22);
  /* the robot as on navy: its blue lines and face, its eyes and mouth, its cheeks, its helmet's and ears' white, the
     amber of its antenna when it thinks, its star eyes, a drop of sweat */
  --site-bot-line: #256aa6;
  --site-bot-eye: #ffffff;
  --site-bot-cheek: #5f9bd1;
  --site-bot-helmet-1: #ffffff;
  --site-bot-helmet-2: #cdcdd0;
  --site-bot-ear-1: #e2e2e3;
  --site-bot-ear-2: #ffffff;
  --site-bot-amber: #f5b82e;
  --site-bot-star: #fbf295;
  --site-bot-drop: #e6f6fd;
  /* on a white or pale part: a navy helmet and a teal face */
  --site-bot-light-line: #2ab4c0;
  --site-bot-light-eye: #002a40;
  --site-bot-light-cheek: #1b8f99;
  --site-bot-light-helmet-1: #2b6d8f;
  --site-bot-light-helmet-2: #002a40;
  --site-bot-light-ear-1: #0b3a55;
  --site-bot-light-ear-2: #1d5a7a;
  /* on the yellow band: a teal helmet and a navy face */
  --site-bot-yellow-line: #002a40;
  --site-bot-yellow-eye: #ffffff;
  --site-bot-yellow-cheek: #256aa6;
  --site-bot-yellow-helmet-1: #7fdde4;
  --site-bot-yellow-helmet-2: #1b8f99;
  --site-bot-yellow-ear-1: #2ab4c0;
  --site-bot-yellow-ear-2: #bdeef2;
  /* sizes: the column, its sides on a computer and a phone */
  --site-wrap: 75rem;
  --site-gutter: 1.5rem;
  --site-gutter-phone: 1rem;
  /* words: the name in the bar, the bar's links, the foot's words and its titles, small lines, the big title of a short
     page, the line under it, a big button's, the robot's bubble, a card's title, name and line */
  --site-size-brand: 1.375rem;
  --site-size-brand-phone: 1.125rem;
  --site-size-nav: 0.9375rem;
  --site-size-foot: 0.9375rem;
  --site-size-foot-title: 1rem;
  --site-size-foot-brand: 1.25rem;
  --site-size-small: 0.875rem;
  --site-size-display: clamp(1.875rem, 1.2rem + 3vw, 3.75rem);
  --site-size-lead: clamp(0.9375rem, 0.8rem + 0.6vw, 1.3125rem);
  --site-size-button: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --site-size-bubble: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem);
  --site-size-card-title: clamp(0.9375rem, 0.86rem + 0.35vw, 1.125rem);
  --site-size-card-name: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --site-size-card-line: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --site-size-follow: 0.875rem;
  --site-size-follow-phone: 0.75rem;
  /* a policy's page: its title, its words and its headings, and the width its lines run to */
  --site-size-title: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --site-size-text: 1.0625rem;
  --site-size-heading: 1.375rem;
  --site-reading: 50rem;
  /* corners: a link's pill, the big buttons, «أنشئ حساباً», a card, the robot's bubble */
  --site-radius-pill: 999px;
  --site-radius-button: 1rem;
  --site-radius-signup: 0.875rem;
  --site-radius-card: 1.625rem;
  --site-radius-bubble: 1.125rem;
  /* the robot: in the bar, in the foot, the big one of a short page, the one that follows */
  --site-robot-bar: 4.125rem;
  --site-robot-bar-phone: 3rem;
  --site-robot-foot: 3.25rem;
  --site-robot-big: 28.75rem;
  --site-robot-big-phone: 13.75rem;
  --site-robot-follow: 6.5rem;
  --site-robot-follow-phone: 4.75rem;
  /* the visitors' bar's controls' height, «أنشئ حساباً» on a computer and ☰ on a narrow screen: the bar keeps it with the
     name alone too, so it never grows as its links come */
  --site-bar-control: 3.0625rem;
  --site-bar-control-phone: 2.75rem;
  /* the big buttons' height, a computer's and a phone's, and their shadow's */
  --site-button-height: 3.625rem;
  --site-button-height-phone: 3.25rem;
  --site-button-shadow: 0.375rem;
  --site-card-shadow: 0.75rem;
  /* the visitors' home «عدّ أيامك» (part c): a day of the calendar not in the plan, and the ring of a day gone; the
     picture of «خطتي اليوم» (its drop, its bar's track, its lines, its link); a navy button on a light band (yellow in
     dark mode, as the dark board has it); the lines between «وأكثر من التدريب»'s three */
  --site-day: #12455f;
  --site-day-gone: rgb(196 216 230 / 0.16);
  --site-card-drop: #d3e0ea;
  --site-track: #d9e5ee;
  --site-rule: #e1eaf1;
  --site-teal-link: #0f5f66;
  --site-ink-button: #002a40;
  --site-on-ink-button: #ffffff;
  --site-navy-rule: #1d4d66;
  /* its words: the first title and the line under it, the quick choices, the days left (a number, «غداً», «بلا موعد»)
     and the words beside them, the plan's lines, the line under the calendar, the robot's bubble, «احفظ خطتي»; the
     bands' titles (the day's, «وأكثر من التدريب»'s, the yellow band's) and the line under the first; the picture's
     title and «وأكثر من التدريب»'s names */
  --site-size-hero: clamp(2.125rem, 1.2rem + 3.6vw, 4.25rem);
  --site-size-hero-lead: clamp(0.9375rem, 0.85rem + 0.45vw, 1.1875rem);
  --site-size-pill: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --site-size-days: clamp(5.25rem, 4.37rem + 3.91vw, 7.5rem);
  --site-size-days-tomorrow: clamp(3.75rem, 3.07rem + 3.04vw, 5.5rem);
  --site-size-days-none: clamp(2.75rem, 2.26rem + 2.17vw, 4rem);
  --site-size-days-words: clamp(1.0625rem, 0.97rem + 0.43vw, 1.3125rem);
  --site-size-line: clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem);
  --site-size-status: clamp(0.8125rem, 0.76rem + 0.22vw, 0.9375rem);
  --site-size-say: clamp(0.8125rem, 0.74rem + 0.33vw, 1rem);
  --site-size-save: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);
  --site-size-band: clamp(1.75rem, 1.36rem + 1.74vw, 2.75rem);
  --site-size-band-more: clamp(1.625rem, 1.38rem + 1.09vw, 2.25rem);
  --site-size-band-cta: clamp(1.625rem, 1.28rem + 1.52vw, 2.5rem);
  --site-size-band-lead: clamp(0.9375rem, 0.865rem + 0.33vw, 1.125rem);
  --site-size-picture: clamp(1.1875rem, 1.12rem + 0.33vw, 1.375rem);
  /* the calendar's words: the days of the week down its side, the months over it, what its colours are; a phone's */
  --site-size-cal-day: 0.6875rem;
  --site-size-cal-day-phone: 0.625rem;
  --site-size-cal-month: 0.75rem;
  --site-size-cal-month-phone: 0.625rem;
  --site-size-cal-key: 0.8125rem;
  --site-size-cal-key-phone: 0.75rem;
  /* the calendar's days (at most this wide: they share the width there is), the gaps between them, the column of the
     days of the week; a phone's. The calendar's column on a computer, and the picture's */
  --site-cal-cell: 1.875rem;
  --site-cal-cell-phone: 1.0625rem;
  --site-cal-gap: 5px;
  --site-cal-gap-phone: 4px;
  --site-cal-side: 2.5rem;
  --site-cal-side-phone: 0.875rem;
  --site-hero-side: 40.625rem;
  --site-picture-width: 32.5rem;
  /* the home's robots: over the calendar, beside «خطتي اليوم», in «وأكثر من التدريب», on the yellow band; a phone's */
  --site-robot-days: 11.875rem;
  --site-robot-days-phone: 6.875rem;
  --site-robot-card: 5.25rem;
  --site-robot-card-phone: 4rem;
  --site-robot-more: 5.75rem;
  --site-robot-more-phone: 4rem;
  --site-robot-cta: 9.375rem;
  --site-robot-cta-phone: 6.875rem;
  /* the height of the quick choices over the calendar, and of the picture's «تدرّب» (a phone's) */
  --site-pill-height: 2.75rem;
  --site-card-button: 3rem;
  --site-card-button-phone: 2.875rem;
  /* «الدورات» and a course's page (part d): a course's picture when it has none of its own, on one of four colours
     (the robot on each in its coat); the chips on it (its status: open or on now, full, the rest) and the exam's in its
     page's band; a full run's bar; the box of a lecture's number */
  --site-picture-teal: #d5f1f3;
  --site-picture-yellow: #fdf6b5;
  --site-picture-navy: #0b3a55;
  --site-picture-blue: #e3edf6;
  --site-chip: #ffffff;
  --site-chip-text: #0f5f66;
  --site-chip-full: #fbf295;
  --site-chip-full-text: #1d2329;
  --site-chip-quiet: #12455f;
  --site-chip-quiet-text: #ffffff;
  --site-bar-full: #0b3a55;
  --site-number: #e3f6f7;
  /* their words: the bands' first titles and a course's lines there, «الدورات المتاحة», a card's chips, title, lines
     and price, a step's number and title, «كيف تسجّل في دورة» and «ما تجده بعد التسجيل», a course page's cards'
     titles and its price */
  --site-size-page: clamp(2rem, 1.25rem + 3.3vw, 3.75rem);
  --site-size-page-line: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
  --site-size-list: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
  --site-size-chip: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --site-size-card-head: clamp(1.1875rem, 1.13rem + 0.25vw, 1.3125rem);
  --site-size-card-text: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --site-size-price: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --site-size-step: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --site-size-how: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem);
  --site-size-visit-title: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --site-size-visit-price: clamp(1.625rem, 1.5rem + 0.5vw, 1.875rem);
  /* their measures: the robot of «الدورات»'s band (a phone's), a step's number, a lecture's number (a phone's), a
     trainer's photo, a course's picture in its page's band, «التسجيل»'s column */
  --site-robot-hero: 11.875rem;
  --site-robot-hero-phone: 6.5rem;
  --site-step-dot: 3rem;
  --site-step-dot-phone: 2.375rem;
  --site-lecture-n: 2.5rem;
  --site-lecture-n-phone: 2.125rem;
  --site-trainer-photo: 4rem;
  --site-visit-picture: 28.75rem;
  --site-visit-side: 23.125rem;
  /* «اختبار القدرات», «من نحن» and «للمدرّبين» (part e): the test's facts on blue cards (their ring the band's colour),
     the kinds' pills (the verbal part's teal, the quantitative's yellow), a sample question's box and its choices (to
     do, right, wrong, each with its drop; since Task indoor, part d practice's choices too, learn.css), the scale under
     «تقديرنا»; the live room's picture: on now, being recorded, its board, its chat and the trainer's message in it, the
     line to write, the pen's circle */
  --site-fact: #256aa6;
  --site-fact-text: #dbe9f5;
  --site-fact-ring: #e8eef4;
  --site-fact-drop: #cfdbe6;
  --site-kind-verbal: #e3f6f7;
  --site-kind-verbal-text: #0f5f66;
  --site-kind-quant: #fdf6b5;
  --site-kind-quant-text: #5c4a00;
  --site-sample: #f6f9fb;
  --site-option: #ffffff;
  --site-option-text: #002a40;
  --site-option-drop: #d3e0ea;
  --site-option-right: #0f7c86;
  --site-option-right-drop: #0a5a61;
  --site-option-wrong: #b3261e;
  --site-option-wrong-drop: #7f1b15;
  /* a choice not picked once one is (as the board's at half strength, but its focus ring whole) */
  --site-option-dim: #fbfcfd;
  --site-option-dim-text: #7e939f;
  --site-option-dim-drop: #e5edf3;
  --site-on-option: #ffffff;
  --site-scale-text: #8fb0c5;
  --site-live: #b3261e;
  --site-recording: #e85c52;
  --site-board: #fdfdfb;
  --site-chat: #f6f9fb;
  --site-chat-trainer: #d5f1f3;
  --site-chat-write: #6b7f90;
  --site-chat-edge: #dbe6ee;
  --site-ink-circle: #e8a317;
  /* their words: a fact's number, a sample's stem and choices, «تقديرنا»'s range, the room's question, the test's page's
     title on a phone (beside its robot) */
  --site-size-fact: clamp(2.25rem, 1.9rem + 1.4vw, 2.875rem);
  --site-size-stem: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --site-size-option: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --site-size-range: clamp(2rem, 1.75rem + 1vw, 2.5rem);
  --site-size-room-stem: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);
  --site-size-gat-title-phone: clamp(1.875rem, 0.6rem + 5vw, 2.75rem);
  /* their measures: the robots of the bands (/about's, and on a phone /gat's and /about's) and of the steps, a fact's and
     a sample's least height, the room's chat column, and how much of the room stands on the pale band (a phone's) */
  --site-robot-page: 18.75rem;
  --site-robot-about: 21.25rem;
  --site-robot-gat-phone: 5.75rem;
  --site-robot-about-phone: 11.875rem;
  --site-robot-step: 9.375rem;
  --site-robot-step-phone: 6rem;
  --site-robot-say: 10.625rem;
  --site-option-height: 3.125rem;
  --site-room-chat: 18.75rem;
  --site-room-pale: 13.75rem;
  --site-room-pale-phone: 7.5rem;
  /* «المساعدة», the account pages, a certificate and the report (part f): the search box on the navy band (white, its
     words navy, in both modes, as the dark board has it; its hint a shade darker than the board's, to read at 4.5:1),
     a form's boxes and their edge (dark mode's darker than the card, their edge lighter, so they show: there's no dark
     board for the account pages), the lines between the questions, the answers' words, a section's count (darker than
     the board's too), and «شهادة صحيحة…»'s words */
  --site-search: #ffffff;
  --site-search-text: #002a40;
  --site-search-hint: #5e7184;
  --site-search-icon: #3d5266;
  --site-field: #ffffff;
  --site-field-line: #d3e0ea;
  --site-rule-soft: #e8eff4;
  --site-ink-soft: #2a3a48;
  --site-ink-faint: #5e7184;
  --site-ok-text: #0b4a50;
  /* their words: a form's title (an account card's, «تواصل معنا»'s), the robot's line beside a form, a box's name and
     what's typed in it, a form's button, the app's line under the robot; the search's words, a section's title, a
     question and its answer; a certificate's state, «شهادة صحيحة…»; the report's title and «ما «كودي باس»؟» */
  --site-size-form-title: clamp(1.625rem, 1.38rem + 1.09vw, 2.125rem);
  --site-size-form-say: clamp(0.9375rem, 0.86rem + 0.35vw, 1.125rem);
  --site-size-form-label: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --site-size-field: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --site-size-form-button: clamp(1.0625rem, 1.03rem + 0.12vw, 1.125rem);
  --site-size-auth-line: 1.125rem;
  --site-size-search: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  --site-size-section: clamp(1.125rem, 1.03rem + 0.43vw, 1.375rem);
  --site-size-question: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --site-size-answer: clamp(0.875rem, 0.84rem + 0.17vw, 1rem);
  --site-size-state-title: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --site-size-cert-real: clamp(0.9375rem, 0.87rem + 0.33vw, 1.125rem);
  --site-size-report-title: clamp(1.625rem, 1.07rem + 2.48vw, 2.875rem);
  --site-size-what: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
  /* their measures: an account card's width, a box's and a form button's height (a phone's box), the robot beside a
     form (above it on a phone), the search box's height, the sections' column, /help's robot, and the robot beside a
     part's words («تواصل معنا», a certificate's state, the report's band; a phone's) */
  --site-auth-card: 31.25rem;
  --site-field-height: 3.375rem;
  --site-field-height-phone: 3.125rem;
  --site-form-button: 3.5rem;
  --site-robot-auth: 22.5rem;
  --site-robot-auth-phone: 8.125rem;
  --site-search-height: 3.875rem;
  --site-help-side: 16.25rem;
  --site-robot-help: 15rem;
  --site-robot-side: 12.5rem;
  --site-robot-side-phone: 8.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* the kit's dark board (Task indoor): the main button yellow with navy words, the page dark, cards a little lighter,
       the words light, teal lighter to read */
    --color-primary: #fbf295;
    --color-primary-strong: #fffbd6;
    --color-primary-drop: #c9bf5c;
    --color-on-primary: #002a40;
    --color-bg: #0f1720;
    --color-surface: #16212c;
    --color-raised: #1d2b38;
    --color-border: #2a3846;
    --color-rule: #223040;
    --color-drop: #070d13;
    --color-text: #e6edf3;
    --color-quiet: #9aa8b6;
    --color-stage-text: #9aa8b6;
    /* the scroll bars on the dark page (the owner, 31 Oct 2026: the light ones stood out): a dark track, a thumb a little
       lighter than the lines */
    --color-scrollbar-track: #0f1720;
    --color-scrollbar-thumb: #34465a;
    --color-muted: #9aa8b6;
    --color-link: #7fdde4;
    --color-link-hover: #e6edf3;
    --color-on-text: #5fd3dc;
    --color-track: #2a3846;
    --color-success: #5fd3dc;
    --color-danger: #ff8a80;
    --color-focus: #fbf295;
    --color-header-bg: #004469;
    --color-header-text: #e6edf3;
    --color-header-link: #c9d3dc;
    --color-header-line: #fbf295;
    --color-input-bg: #0f1720;
    --color-input-border: #566c80;
    --color-input-focus: #e6edf3;
    --color-danger-soft: #3a1f1d;
    --color-success-soft: #10363a;
    --color-success-text: #bdeef2;
    --color-info-soft: #20344a;
    --color-chip-teal: #133f47;
    --color-chip-teal-text: #7fdde4;
    --color-chip-yellow: #2b2914;
    --color-chip-yellow-text: #f0e48a;
    --color-chip-grey: #223040;
    --color-chip-grey-text: #c9d3dc;
    --color-hint: #33270f;
    --color-hint-line: #5a4519;
    --color-hint-text: #f5c96a;
    --color-heading-accent: #ee8282;
    --color-correct: #5fd3dc;
    --color-correct-soft: #10363a;
    --color-draft: #f5c96a;
    --color-draft-soft: #33270f;
    --color-star: #f2c14e;
    --color-backdrop: rgb(0 0 0 / 0.6);
    --color-side-scrim: rgb(0 0 0 / 0.5);
    --shadow-raised: 0 0.75rem 1.75rem rgb(0 0 0 / 0.5);
    --shadow-window: 0 1rem 1.875rem rgb(0 0 0 / 0.6);
    /* docBuilder content keeps its dark look as it was before Task indoor (base.css) */
    --color-doc-text: #e6edf3;
    --color-doc-muted: #9aa8b6;
    --color-doc-heading: #4fb0e6;
    --color-doc-heading-3: #7cc6ef;
    --color-doc-line: #454545;
    --color-doc-head-bg: #14293a;
    --drawing-filter: invert(0.9) hue-rotate(180deg);
    /* the old dark keys' teal (#578184), for the course page's icons */
    --color-header-bg-strong: #002a40;
    --color-key-icon: #578184;
    /* the page you are on in a menu's box (Task indoor, part b) */
    --color-current: #133f47;
    /* «المجتمع»'s staff letter and badge (Task indoor, part e) */
    --color-staff: #e6edf3;
    --color-on-staff: #0f1720;
    /* the live class's room (part f) */
    --color-stage: #0b1219;
    --color-chat-me-line: #1f5f68;
    --color-danger-line: #6b2c28;
    --color-cams: #08131c;
    --color-cams-key: #13283a;
    --color-cams-line: #1e3a50;
    --color-cams-ink: #9fb7c8;
    /* «التدريب»'s level steps and what's done (Task indoor, part d) */
    --color-step: #16212c;
    --color-step-line: #566c80;
    --color-step-below: #1f5f68;
    --color-step-empty: #3b4b5b;
    --color-done: #2ab4c0;
    --color-on-done: #002a40;
    /* the outdoor pages (Task site): the white and pale bands turn dark, the navy ones stay navy; the yellow band dims;
       the robot's coats as the dark boards have them */
    --site-band: #16212c;
    --site-band-pale: #0f1720;
    --site-card: #1d2b38;
    --site-line: #2a3846;
    --site-ink: #e6edf3;
    --site-ink-quiet: #9aa8b6;
    --site-teal-text: #5fd3dc;
    --site-link: #7fdde4;
    --site-link-hover: #bdeef2;
    --site-error: #ff8a80;
    --site-hover: #1d2b38;
    --site-focus-light: #fbf295;
    --site-yellow-band: #2b2914;
    --site-yellow-band-title: #fbf295;
    --site-yellow-band-text: #d9d5b0;
    --site-bubble: #e6edf3;
    --site-bot-light-line: #002a40;
    --site-bot-light-eye: #ffffff;
    --site-bot-light-cheek: #256aa6;
    --site-bot-light-helmet-1: #7fdde4;
    --site-bot-light-helmet-2: #1b8f99;
    --site-bot-light-ear-1: #2ab4c0;
    --site-bot-light-ear-2: #bdeef2;
    --site-bot-yellow-cheek: #e0a92a;
    --site-bot-yellow-helmet-1: #fffbd6;
    --site-bot-yellow-helmet-2: #d8cb5e;
    --site-bot-yellow-ear-1: #f3e97e;
    --site-bot-yellow-ear-2: #fffbd6;
    /* the home's picture of «خطتي اليوم» and its navy buttons (part c) */
    --site-card-drop: #002a40;
    --site-track: #2a3846;
    --site-rule: #2a3846;
    --site-teal-link: #7fdde4;
    --site-ink-button: #fbf295;
    --site-on-ink-button: #002a40;
    /* «الدورات» and a course's page (part d): the pictures' colours dim (the robot's coats follow), a full bar reads
       on a dark card, a lecture's number's box */
    --site-picture-teal: #133f47;
    --site-picture-yellow: #2b2914;
    --site-picture-blue: #20344a;
    --site-bar-full: #9aa8b6;
    --site-number: #173a43;
    /* «اختبار القدرات», «من نحن» and «للمدرّبين» (part e): the facts' cards a darker blue ringed by the dark band, the
       kinds' pills, a sample's box and its choices to do, the live room's board and chat dark too */
    --site-fact: #1d4f7c;
    --site-fact-ring: #16212c;
    --site-fact-drop: #002a40;
    --site-kind-verbal: #133f47;
    --site-kind-verbal-text: #7fdde4;
    --site-kind-quant: #2b2914;
    --site-kind-quant-text: #f0e48a;
    --site-sample: #16212c;
    --site-option: #2a3846;
    --site-option-text: #e6edf3;
    --site-option-drop: #0f1720;
    --site-option-dim: #202d39;
    --site-option-dim-text: #838d96;
    --site-option-dim-drop: #131c26;
    --site-board: #1d2b38;
    --site-chat: #16222d;
    --site-chat-trainer: #133f47;
    --site-chat-write: #9aa8b6;
    --site-chat-edge: #2a3846;
    /* «المساعدة», the account pages, a certificate and the report (part f): as the dark board has them; a form's boxes
       darker than the card, their edge lighter */
    --site-field: #0f1720;
    --site-field-line: #566c80;
    --site-rule-soft: #223040;
    --site-ink-soft: #c9d3dc;
    --site-ink-faint: #9aa8b6;
    --site-ok-text: #bdeef2;
  }

  /* the outdoor pages and the builders' page: the app's old dark values (above, the light ones and the rest) */
  .site,
  #body {
    --color-primary: #4fb0e6;
    --color-primary-strong: #7cc6ef;
    --color-on-primary: #0b1620;
    --color-border: #2a3846;
    --color-text: #e6edf3;
    --color-muted: #9aa8b6;
    --color-quiet: #9aa8b6;
    --color-link: #4fb0e6;
    --color-link-hover: #4fb0e6;
    --color-on: #4fb0e6;
    --color-on-text: #4fb0e6;
    --color-success: #4cc38a;
    --color-success-text: #4cc38a;
    --color-danger: #603835;
    --color-danger-fill: #603835;
    --color-correct: #3a6a6e;
    --color-correct-fill: #3a6a6e;
    --color-on-fill: #16212c;
    --color-focus: #7cc6ef;
    --color-input-bg: #2a2a2a;
    --color-input-border: #454545;
    --color-input-focus: #7d8ca6;
    --color-success-soft: #15301f;
    --color-info-soft: #14293a;
    --color-draft: #f3d38a;
    --color-draft-soft: #3a3016;
    --color-backdrop: rgb(0 0 0 / 0.65);
    --shadow-raised: 0 0.5rem 2rem rgb(0 0 0 / 0.6);
  }
}