/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   xtore-brand.css — Xtore's own brand: navy and turquoise, and a more professional typeface.

   Decided in the meeting xtr102 (2026-11-12):
     [37:09] Itzik: «כחול וטורקיז. אני חושב שזה הצבעים שאנחנו צריכים לכוון»
     [37:30] Shlomo: «הייתי לוקח ממש את הצבעים שנבחרו פה» — the colours of Itzik's dashboard concept
             (ci-artifacts/xtore-v1/itzik/IMG_4529.jpeg: the side column #031a35, the buttons #087f80)
     [38:32] the font «קצת AI»; [38:46] the concept's font «מרגיש קצת יותר מקצועי»
   Xtore is a product of its own on its own domain, so it carries a palette of its own — allowed by name in
   scripts/refactor/palette-lint.py, like the cap builder's. It loads AFTER xtore.css and only re-points tokens:
   the screens keep naming the office's roles (--brand, --accent, --side, --olive…), and here those roles take
   Xtore's colours. Nothing else changes: lime still waits, sky still moves, plum still fails.
   The selectors match the palette block's own (:root[data-theme="light"] / ="midnight"), so the later file wins.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Heebo, from the office's own copy (apps/apitools/src/doc_gen/fonts/Heebo.ttf, OFL 1.1 —
   scripts/release/public/LICENSES/OFL-1.1-Heebo.txt): one variable file, every weight */
@font-face{font-family:"Heebo";src:url("fonts/Heebo.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root,:root[data-theme="light"]{
  --x-navy:#08203d; --x-navy-2:#1c3755; --x-navy-ink:#f3f6fa; --x-navy-mut:#a9b7c9; --x-navy-line:#2a4361;
  --x-teal:#0b8384; --x-teal-d:#08686a; --x-teal-soft:#e3f4f3; --x-teal-line:#a9d9d6; --x-teal-ink:#ffffff;
  --bg:#f4f5f9; --surface:#ffffff; --surface-2:#f8f9fc; --ink:#13213a; --muted:#5f6b7c; --line:#dde2ea;
  --olive:var(--x-teal); --olive-d:var(--x-teal-d); --olive-soft:var(--x-teal-soft); --olive-line:var(--x-teal-line); --olive-ink:var(--x-teal-ink);
  --side:var(--x-navy); --side-ink:var(--x-navy-ink); --side-mut:var(--x-navy-mut); --side-line:var(--x-navy-line);
  --desk:var(--bg); --desk-ink:var(--ink);
}
/* midnight: the navy deepens and the turquoise lifts — the same roles on the dark ground */
:root[data-theme="midnight"]{
  --x-navy:#0a1426; --x-navy-2:#16263f; --x-navy-ink:#e8eef6; --x-navy-mut:#8fa1b8; --x-navy-line:#22344f;
  --x-teal:#2bb3b1; --x-teal-d:#5fd0cd; --x-teal-soft:#0f2f33; --x-teal-line:#1f5458; --x-teal-ink:#04201f;
  --bg:#0b1322; --surface:#101b2e; --surface-2:#0d1627; --ink:#e8eef6; --muted:#93a1b5; --line:#263650;
  --olive:var(--x-teal); --olive-d:var(--x-teal-d); --olive-soft:var(--x-teal-soft); --olive-line:var(--x-teal-line); --olive-ink:var(--x-teal-ink);
  --accent:var(--x-teal-d); --accent-ink:var(--surface); --ok:var(--x-teal-d);
  --side:var(--x-navy); --side-ink:var(--x-navy-ink); --side-mut:var(--x-navy-mut); --side-line:var(--x-navy-line);
  --desk:var(--bg); --desk-ink:var(--ink);
}
/* the type: Heebo for the whole product */
:root{--font:"Heebo","Segoe UI",system-ui,-apple-system,"Noto Sans Hebrew",Arial,sans-serif}

/* the side column on a computer is the concept's navy, its sections light on it (IMG_4529: the column #031a35,
   the section you are in a lighter navy) */
@media (min-width:768px){
  .x-rail{background:var(--x-navy);border-inline-end-color:var(--x-navy-line);color:var(--x-navy-ink)}
  .x-rail .go{color:var(--x-navy-ink)}
  .x-rail nav a{color:var(--x-navy-mut)}
  .x-rail nav a:hover{background:var(--x-navy-2);color:var(--x-navy-ink)}
  .x-rail nav a[aria-current="page"]{background:var(--x-navy-2);color:var(--x-navy-ink)}
  .x-rail nav a[aria-current="page"] svg.i{color:var(--x-teal-line)}
  .x-rail nav .sep{background:var(--x-navy-line)}
  .x-rail .foot{border-top-color:var(--x-navy-line);color:var(--x-navy-ink)}
  .x-rail .brand,.x-rail .brand .word{color:var(--x-navy-ink)}
  .x-rail .brand .word b{color:var(--x-teal-line)}
  .x-rail .orgsw{background:var(--x-navy-2);border-color:var(--x-navy-line);color:var(--x-navy-ink)}
  .x-rail .orgsw .t span{color:var(--x-navy-mut)}
  .x-rail .icbtn{background:var(--x-navy-2);border-color:var(--x-navy-line);color:var(--x-navy-ink)}
}