/* MEDOGLYAD Design System — єдине джерело значень.
 *
 * Палітра — з Master-ТЗ 1.0 (17.09.2026), §3. Раніше тут стояв #275FD4,
 * заміряний попіксельно з логотипа; рішення власника від 17.09.2026 —
 * взяти #176CC1 з ТЗ. Логотип лишається як є, інтерфейс світлішає.
 *
 * Два правила, за якими ці числа саме такі:
 *
 * 1. ОДИН КОРІНЬ. §14.4 ТЗ вимагає одне джерело значень. Досі їх було два:
 *    цей файл і власний :root усередині shell.css (--on-brand, --lift,
 *    --gutter, --radius-control, --nav-width…). Тепер усе тут, а shell.css
 *    тримає лише правила. Жодного «магічного числа» в компонентах.
 *
 * 2. КОЛІР СТАТУСУ МАЄ ДВА ТОНИ, І ЦЕ НЕ ПРИКРАСА. §13.5 ТЗ вимагає WCAG AA
 *    (4.5:1 для звичайного тексту), а §3.4–3.5 дають кольори, розраховані на
 *    заливки й маркери. Заміряно: #4EA978 на білому — 2.89:1, #D89A45 — 2.43:1,
 *    #D65C5C — 3.79:1. Як текст вони не читаються, а чипи статусів у нас саме
 *    текст на мʼякій підкладці. Тому на кожен стан є ДВА токени:
 *      --status-<x>       колір ТЗ: маркер, крапка, рамка, іконка, заливка;
 *      --status-<x>-ink   затемнений рівно доти, доки не дасть ≥4.5:1
 *                         і на своїй підкладці, і на білому — це для тексту.
 *    Відтінок той самий, змінюється лише світлота.
 */
:root{
  /* Схема для елементів, які малює сам браузер: смуги прокрутки, поля вводу,
   * календар. Її не можна лишати на «light dark», коли тему обирає людина, —
   * інакше на темній системі зі світлою темою поля лишаються темними. */
  color-scheme:light;

  /* ── Бренд (ТЗ §3.1–3.2) ─────────────────────────────────────────────── */
  --brand-900:#0A3C78;
  --brand-800:#0C4B94;
  --brand-700:#0F5EAF;
  --brand-600:#176CC1;
  --brand-500:#2B7ED0;
  --brand-400:#5A9BDD;
  --brand-200:#CFE4F7;
  --brand-100:#E6F2FC;
  --brand-50:#F3F8FD;

  /* Білий напис на #176CC1 — 5.31:1, AA з запасом. */
  --brand-primary:#176CC1;
  --brand-primary-hover:#0F5EAF;
  --brand-primary-active:#0A4D91;
  --brand-primary-soft:#E6F2FC;
  --brand-primary-border:#CFE4F7;
  --brand-ink:#0A3C78;
  /* Той самий бренд у складниках — для напівпрозорих відтінків: смуга
   * прокрутки, кільце фокуса, підсвітка рядка. Доти вони писались як
   * rgba(39,95,212,…) — тобто старим кольором, який усюди вже замінено, і
   * після зміни бренду мовчки лишились би синіми по-старому. */
  --brand-rgb:23,108,193;
  --warning-rgb:216,154,69;
  --on-brand:#FFFFFF;
  /* Той самий напис, притишений: у шапці кабінету працівника він стояв як
   * rgba(255,255,255,.7) — а в темній темі смуга світлішає, і білий по ній
   * зникає. */
  --on-brand-muted:rgba(255,255,255,.72);

  /* ── Поверхні (ТЗ §3.3) ──────────────────────────────────────────────── */
  --surface-base:#FFFFFF;
  --surface-subtle:#F7FAFD;
  --surface-sunken:#F4F8FC;
  --surface-raised:#FFFFFF;
  --surface-inverse:#16233A;
  --surface-inverse-raised:#1E2E49;
  /* Біла картка на темній смузі (кнопка «Написати нам» у підвалі лендингу) —
   * вона біла завжди, бо смуга темна завжди. --surface-base тут не годиться:
   * у темній темі він темніє, і кнопка зникає в тлі. */
  --surface-on-inverse:#FFFFFF;
  /* Напівпрозора шапка, що лежить поверх сторінки. Була жорстко білою — у
   * темній темі крізь неї просвічувало темне тло, а сама вона лишалась білою. */
  --surface-veil:rgba(255,255,255,.92);
  /* Рядок таблиці під курсором і рядок обраний (ТЗ §6.6). */
  --row-hover:#FAFCFE;
  --row-selected:#F0F7FE;

  /* ── Текст ───────────────────────────────────────────────────────────── */
  /* Три щаблі, і всі три читаються. Значення ТЗ #5E7690 дає 4.48:1 на тлі
   * сторінки — на волосину нижче за норму, тож обидва нижні щаблі опущено:
   * secondary тримає 6.0:1, muted — рівно 4.5:1, і між ними лишається
   * видима різниця. */
  --text-primary:#17324D;
  --text-secondary:#4E6277;
  --text-muted:#5E768D;
  --text-inverse:#FFFFFF;
  --text-inverse-muted:#A9B6CC;
  /* Текст на темній брендовій смузі (герой лендингу, підвал, «двері» кабінетів).
   * Між білим і приглушеним є ще два щаблі, і доти вони жили розсипом по
   * сторінках: #C7D8F7, #D7DEEB, #EEF3FD, #EEF1F6 — чотири значення на дві
   * потреби. */
  --text-inverse-soft:#C7D8F7;
  --text-inverse-strong:#EEF3FD;

  /* ── Межі (ТЗ §3.3) ──────────────────────────────────────────────────── */
  --border-default:#DFE9F3;
  --border-strong:#C8D9E9;
  --border-subtle:#EBF1F6;
  --hairline:1px solid var(--border-subtle);
  --hairline-strong:1px solid var(--border-default);
  --border-inverse:#26354F;
  /* Ледь помітна межа на темній смузі: доти вона писалась то як
   * rgba(199,216,247,.22), то як rgba(255,255,255,.35), то як .4 і .5 — чотири
   * записи однієї й тієї ж лінії. */
  --border-inverse-soft:rgba(255,255,255,.3);

  /* ── Сцена: те, що темне завжди ──────────────────────────────────────── */
  /* Відеовиклик і переглядач знімків темні й у світлій темі — знімок дивляться
   * на темному тлі, це не оформлення, а умова перегляду. Тому окрема родина
   * значень, яка не перемикається разом з усім. Доти консоль лікаря тримала ці
   * кольори розсипом і трохи різними: #0B121C і #0b1118, #111A26 і #111a25,
   * #E9EEF6 і #dfe7f1 — дві пари майже однакових на один і той самий сенс. */
  --stage-base:#0B121C;
  --stage-raised:#111A26;
  --stage-sunken:#18222F;
  --stage-border:#293546;
  --stage-text:#E9EEF6;
  --stage-text-soft:#AEBACC;
  --stage-text-muted:#8494AA;
  --scrim:rgba(8,14,24,.72);
  /* Червоний напис на темній сцені: там світлішає не тема, а тло, тож колір
   * фіксований. */
  --stage-danger:#F08279;
  /* Легкий відблиск на картці. У темній темі білого відблиску не буває. */
  --gloss:rgba(255,255,255,.9);
  /* Скляна картка поверх фотографії на екрані входу. Вона біла в обох темах —
   * не за недоглядом: під нею світлина, а не поверхня сторінки. */
  --glass:rgba(255,255,255,.74);
  --glass-border:rgba(255,255,255,.65);
  /* І напис на ньому, і тло під світлиною — теж світлі завжди: якби вони
   * темніли разом з темою, у темній вийшов би майже білий текст на білому склі.
   * Це не поверхня сторінки, а частина фотографії. */
  --glass-ink:#25303D;
  --glass-canvas:#E9EDF2;

  /* ── Стани: маркер і текст ───────────────────────────────────────────── */
  --status-danger:#D65C5C;      --status-danger-ink:#CD3737;   --status-danger-soft:#FFF0F0;
  --status-warning:#D89A45;     --status-warning-ink:#9B6721;  --status-warning-soft:#FFF7E9;
  --status-caution:#D8B545;     --status-caution-ink:#7E6410;  --status-caution-soft:#FBF6E3;
  --status-success:#4EA978;     --status-success-ink:#3A7D59;  --status-success-soft:#EDF8F2;
  --status-info:#2B7ED0;        --status-info-ink:#2670B9;     --status-info-soft:#E6F2FC;
  --status-neutral:#8EA1B4;     --status-neutral-ink:#4E6277;  --status-neutral-soft:#F0F4F8;

  /* ── Типографіка ─────────────────────────────────────────────────────── */
  /* Montserrat — шрифт сайту й логотипа; рішення власника від 17.09.2026
   * лишити його, а не переходити на Inter. Ваги 400/500/600/700 лежать
   * локально у /fonts і від 17.09.2026 є справжніми файлами: доти 500, 600
   * і 700 вказували на той самий файл 400, тож жодного напівжирного на
   * платформі не було — браузер малював заголовки звичайною вагою і нічого
   * не синтезував, бо вважав, що це і є сімсотка. */
  --font-sans:"Montserrat","Segoe UI Variable",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Шкала ТЗ §4.3, з clamp там, де заголовок має дихати на вузькому екрані. */
  --text-page:clamp(26px,2.4vw,32px);
  --text-h2:24px;
  --text-kpi:clamp(26px,3vw,34px);
  --text-section:18px;
  --text-card:16px;
  --text-body:14px;
  --text-secondary-size:13px;
  --text-meta:12px;
  --text-label:11px;

  --leading-page:1.25;
  --leading-heading:1.35;
  --leading-body:1.55;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* ── Простір ─────────────────────────────────────────────────────────── */
  /* Крок 8px зі щаблем 4px для щільних контролів. Значення навмисно НЕ
   * перенумеровані під список ТЗ §5.5: --space-5 означає 24px у восьми
   * сторінках, і зміна сенсу зсунула б верстку скрізь мовчки. */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --measure:1440px;
  --gutter:32px;
  --gutter-tight:20px;
  --nav-width:296px;
  --top-height:56px;

  /* ── Радіуси (ТЗ §5.4) ───────────────────────────────────────────────── */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-chip:8px;
  /* §6.4–6.5 ТЗ прямо називають 10px для кнопок і полів. На етапі 2 тут стояло
   * 12px — власне округлення, ближче до карток; ТЗ важить більше. */
  --radius-control:10px;
  --radius-block:16px;

  /* ── Тінь (ТЗ §5.2) ──────────────────────────────────────────────────── */
  /* У спокої — жодної; вона зʼявляється там, де щось справді над сторінкою. */
  --shadow-sm:0 2px 6px rgba(36,72,110,.03);
  --shadow-md:0 10px 30px rgba(36,72,110,.05);
  --shadow-overlay:0 16px 48px rgba(36,72,110,.18);
  --lift:0 2px 6px rgba(36,72,110,.03),0 10px 30px rgba(36,72,110,.05);
  --lift-strong:0 24px 64px -24px rgba(36,72,110,.28);

  /* Кільце фокуса: відтінок ТЗ, але щільність своя. §13.5 вимагає видимий
   * фокус із клавіатури, а .14 з §14.5 на світлому тлі майже не видно. */
  --focus-ring:0 0 0 3px rgba(var(--brand-rgb),.35);

  /* ── Рух (ТЗ §13.4) ──────────────────────────────────────────────────── */
  --motion-fast:120ms; --motion-base:160ms; --motion-slow:220ms;
  --ease:cubic-bezier(.2,.6,.3,1);

  --sidebar-width:296px;
  --sidebar-collapsed:72px;
  --header-height:60px;
}

/* ── Шкала пацієнта ──────────────────────────────────────────────────────
 *
 * Робочий кабінет і екран пацієнта — різні задачі, і щільність у них різна.
 * Реєстратор за монітором тримає перед очима сотню рядків і виграє від
 * 13-піксельного підпису; працівник відкриває свій медогляд із телефона раз
 * на рік, щоб дізнатися одну річ — придатний він і до якого числа. Там
 * 13 пікселів — не щільність, а перешкода.
 *
 * Тому шкала тут не змінюється глобально (це зламало б довгі таблиці
 * адміністративної частини), а вмикається класом на сторінках, які бачить
 * людина ззовні. Усе, що вже читає ці токени, переїжджає разом із нею —
 * правила правити не треба.
 *
 * 16px на полі вводу — не смак: Safari на iOS збільшує сторінку, коли поле
 * дрібніше, і людина після дотику до номера телефона опиняється в
 * масштабованому екрані, з якого сама не вийде. */
.patient-scale{
  --text-body:16px;
  --text-secondary-size:14px;
  --text-meta:13px;
  --text-label:12px;
  --text-card:17px;
  --text-section:19px;
}

@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:1ms;--motion-base:1ms;--motion-slow:1ms}
}

/* ── Знак «МЕДОГЛЯД OS ✚» ─────────────────────────────────────────────────
 * Рішення власника від 26.09.2026: хрест — частина знака на екрані, як у
 * поданій торговельній марці. Малюється двома смугами фону, а не гліфом
 * «✚»: цього символу немає в Montserrat, і на кожній системі він підставлявся
 * б із різного шрифту — різної товщини й висоти. Колір — currentColor, тож
 * хрест завжди того самого кольору, що й «OS», у якому він стоїть. Правило
 * тут, бо tokens.css — єдиний файл, який підключає кожна сторінка. */
.brand-cross{
  display:inline-block;width:.64em;height:.64em;margin-left:.3em;vertical-align:-.02em;
  background:
    linear-gradient(currentColor,currentColor) center/100% 32% no-repeat,
    linear-gradient(currentColor,currentColor) center/32% 100% no-repeat;
  border-radius:1px;letter-spacing:0;
}

/* Знак платформи — растровий логотип власника (26.09.2026) замість
 * текстового «МЕДОГЛЯД OS». Висоту задає місце, де він стоїть
 * (--logo-h); ширина — за пропорцією файлу. */
.brand-logo{display:block;height:var(--logo-h,30px);width:auto;max-width:100%;flex:none}