/* ============================================================================
   assets/common/tokens.css — дизайн-токени MedOnline.

   НАВІЩО. У проєкті 1385 унікальних hex-кольорів, 509 різних імен
   CSS-змінних у 141 файлі, 125 значень border-radius і 42 брейкпоінти.
   Кожна нова сторінка додавала свою варіацію тих самих карток, бо не було
   куди подивитись «а який у нас сірий для рамки».

   ЩО ВАЖЛИВО РОЗУМІТИ ПРО ЦІ ЗНАЧЕННЯ. Вони не вигадані — це те, що вже
   переважає на сайті. Перепис показав повну шкалу Tailwind slate
   (#f8fafc → #0f172a) як домінантну нейтраль і teal/emerald як акцент.
   Тобто токени НЕ змінюють вигляд жодної наявної сторінки: вони лише
   називають те, що там і так намальовано.

   ЧОМУ ПРЕФІКС --mo-. Наявні 509 імен (--bg, --ink, --card, --accent…)
   визначені по файлах і перевизначаються сторінками. Якби токени зайняли
   ті самі імена, сторінка без власного визначення раптом отримала б
   колір, якого раніше не мала. Префікс робить зіткнення неможливим:
   старий код працює як працював, новий пише --mo-*.

   ЯК КОРИСТУВАТИСЬ. Підключається першим (з views/templates/header.php),
   тож будь-яка сторінка може його перекрити. У новій розмітці беремо
   семантичні токени (--mo-surface, --mo-text-muted), а не кольори
   зі шкали (--mo-slate-400) — тоді темна тема працює сама.
   ========================================================================= */

:root{
  /* ── Шкала нейтралей (Tailwind slate — те, що вже переважає) ───────── */
  --mo-slate-50:#f8fafc;
  --mo-slate-100:#f1f5f9;
  --mo-slate-200:#e2e8f0;
  --mo-slate-300:#cbd5e1;
  --mo-slate-400:#94a3b8;
  --mo-slate-500:#64748b;
  --mo-slate-600:#475569;
  --mo-slate-700:#334155;
  --mo-slate-800:#1e293b;
  --mo-slate-900:#0f172a;
  --mo-white:#ffffff;

  /* ── Кольори станів (теж уже вживані) ─────────────────────────────── */
  --mo-teal-600:#0d9488;
  --mo-teal-700:#0f766e;
  --mo-emerald-500:#10b981;
  --mo-emerald-600:#059669;
  --mo-blue-600:#2563eb;
  --mo-indigo-500:#6366f1;
  --mo-red-500:#ef4444;
  --mo-red-600:#dc2626;
  --mo-amber-500:#f59e0b;

  /* ── СЕМАНТИЧНІ ТОКЕНИ. У розмітці користуємось ТІЛЬКИ ними ───────── */
  --mo-bg:var(--mo-slate-50);          /* тло сторінки            */
  --mo-surface:var(--mo-white);        /* картка, панель, модалка */
  --mo-surface-2:var(--mo-slate-100);  /* вкладена підкладка      */
  --mo-text:var(--mo-slate-900);
  /* 5.27:1 на білому, 4.94:1 на світло-блакитному тлі сторінки.
     Було slate-500 із поміткою «4.76:1» — але 4.76 це проти ЧИСТО
     білого, а на сайті майже все лежить на підфарбованій поверхні:
     на смузі періодів (.g-seg) виміряно 4.39:1, тобто нижче порога.
     Тепер обидві поверхні проходять. */
  --mo-text-muted:#5f6d80;
  --mo-text-faint:#6b7280;                   /* 4.83:1 — теж можна      */

  /* Рамки. --mo-border декоративна (розділити картки) і вимог контрасту
     не має. Для полів, кнопок і всього, що можна натиснути, потрібні
     свої 3:1 — це --mo-border-control, і плутати їх не можна. */
  --mo-border:var(--mo-slate-200);
  --mo-border-strong:var(--mo-slate-300);
  --mo-border-control:#77818f;               /* 3.95:1 до білого        */

  /* Акцент навмисно темніший за звичний teal-600: на білому той дає
     лише 3.74:1, тобто ні текстом, ні підписом на кнопці його ставити
     не можна. teal-700 дає 5.47:1 в обидва боки — і як текст, і як фон
     під білим підписом. Те саме з success. */
  --mo-accent:var(--mo-teal-700);            /* 5.47:1 */
  --mo-accent-hover:#115e59;
  --mo-accent-fg:var(--mo-white);            /* текст НА акценті        */
  --mo-success:#047857;                      /* 5.48:1 */
  --mo-danger:var(--mo-red-600);             /* 4.83:1 */
  --mo-warning:var(--mo-amber-500);
  --mo-info:var(--mo-blue-600);

  /* Декоративні, «як було» — для великих плям і графіків, де контраст
     тексту ні до чого. Не використовувати для підписів. */
  --mo-accent-vivid:var(--mo-teal-600);
  --mo-success-vivid:var(--mo-emerald-500);

  /* М'які підкладки станів — для бейджів і плашок. */
  /* Чорнило НА суцільній заливці стану (кнопка «видалити», тост).
     Досі там стояв жорсткий #fff. У світлій темі це правильно, а в
     темній --mo-danger і --mo-success навмисно СВІТЛІ (щоб читатись
     як текст на темному тлі) — і білий підпис на них давав 2.77:1 і
     1.74:1. Тобто найнебезпечніша кнопка сайту в темній темі була
     найгірше видна. Пара «поверхня + чорнило» тут така сама, як у
     --mo-accent / --mo-accent-fg вище. */
  --mo-danger-on:var(--mo-white);
  --mo-success-on:var(--mo-white);

  --mo-success-bg:#ecfdf5;  --mo-success-fg:#065f46;
  --mo-danger-bg:#fef2f2;   --mo-danger-fg:#991b1b;
  --mo-warning-bg:#fff7ed;  --mo-warning-fg:#9a3412;
  --mo-info-bg:#eff6ff;     --mo-info-fg:#1e3a8a;

  /* ── Відступи. Крок 4px — під нього лягає майже все наявне ────────── */
  --mo-space-1:4px;
  --mo-space-2:8px;
  --mo-space-3:12px;
  --mo-space-4:16px;
  --mo-space-5:24px;
  --mo-space-6:32px;
  --mo-space-7:48px;

  /* ── Радіуси. Зі 125 значень реально потрібні пʼять ───────────────── */
  --mo-radius-sm:6px;
  --mo-radius:10px;      /* найуживаніший у проєкті — 387 разів */
  --mo-radius-lg:14px;
  --mo-radius-xl:20px;
  --mo-radius-pill:999px;

  /* ── Тіні ─────────────────────────────────────────────────────────── */
  --mo-shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --mo-shadow:0 6px 24px rgba(15,23,42,.08);
  --mo-shadow-lg:0 18px 46px rgba(15,23,42,.14);

  /* ── Типографіка ──────────────────────────────────────────────────── */
  --mo-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mo-font-head:'Poppins', 'Inter', system-ui, sans-serif;
  --mo-font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mo-text-xs:12px;
  --mo-text-sm:13.5px;
  --mo-text-base:15px;
  --mo-text-lg:17px;
  --mo-text-xl:20px;
  --mo-text-2xl:26px;
  --mo-text-3xl:32px;

  --mo-leading-tight:1.25;
  --mo-leading:1.55;
  --mo-leading-loose:1.7;   /* для тіла статті */

  /* ── Довжина рядка тексту статті ──────────────────────────────────── */
  --mo-measure:68ch;        /* 65–75 символів — межа зручного читання */

  /* ── Час анімацій ─────────────────────────────────────────────────── */
  --mo-dur-fast:.12s;
  --mo-dur:.2s;
  --mo-ease:cubic-bezier(.4,0,.2,1);
}

/* ── ТЕМНА ТЕМА ────────────────────────────────────────────────────────
   Три селектори навмисно. У проєкті історично три конвенції одночасно:
   assets/common/theme.js ставить і html.dark, і body.dark-mode, а частина
   нового коду розрахована на [data-theme]. Поки їх не звели до однієї,
   токени мають відповідати на будь-яку — інакше сторінка отримає темне
   тло й темний текст.

   Перевизначаємо ЛИШЕ семантичні токени. Шкала лишається тією ж: сірий
   #e2e8f0 не стає іншим сірим від того, що ввімкнули темну тему, — просто
   роль «рамка» дістається іншій сходинці шкали. */
html.dark, html[data-theme="dark"], body.dark-mode, body.dark{
  --mo-bg:#0f0f11;
  --mo-surface:#17171b;
  --mo-surface-2:#1f1f25;
  --mo-text:#e8e6ef;
  --mo-text-muted:#a9a4b8;
  --mo-text-faint:#8b86a0;                   /* 5.12:1 — теж читається  */
  --mo-border:#2a2833;
  --mo-border-strong:#3a3746;
  --mo-border-control:#726d88;                /* 3.62:1 до поверхні      */

  /* На темному тлі темний teal нечитний — тут навпаки потрібна світла
     сходинка (9.60:1), а підпис на ній має бути темний. */
  --mo-accent:#2dd4bf;
  --mo-accent-hover:#5eead4;
  --mo-accent-fg:#06231f;
  --mo-accent-vivid:#2dd4bf;
  --mo-success-vivid:#4ade80;
  --mo-success:#4ade80;
  --mo-danger:#f87171;
  --mo-warning:#fbbf24;
  --mo-info:#60a5fa;

  /* Див. --mo-danger-on у світлій темі: тут чорнило темне (7.11:1 і
     9.53:1), бо сама заливка світла. */
  --mo-danger-on:#1a0505;
  --mo-success-on:#04240f;

  --mo-success-bg:#0f2a1e;  --mo-success-fg:#86efac;
  --mo-danger-bg:#2c1416;   --mo-danger-fg:#fca5a5;
  --mo-warning-bg:#2a2214;  --mo-warning-fg:#fcd34d;
  --mo-info-bg:#12203a;     --mo-info-fg:#93c5fd;

  /* Чорні тіні на темному тлі читаються як бруд — глибина йде світлом. */
  --mo-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --mo-shadow:0 6px 24px rgba(0,0,0,.45);
  --mo-shadow-lg:0 18px 46px rgba(0,0,0,.55);
}