/* ═══════════════════════════════════════════════════════════════
   YOLT v13 · ЄДИНІ ТОКЕНИ · зведено 05.09.2026
   ОДИН корінь на все: кіт → хаб → ЕРП → термінали (каса, наряд).
   Розгалуження тільки через [data-density], НЕ через власні токени.

   ШАР 1 — канон. Значення взяті З ДЖЕРЕЛА КІТА
   (v13-bundle/src/kit/atelier-kit.css :root) БЕЗ ЗМІН. Раніше тут був
   мій паралельний набір: інші радіуси (9/14/20 проти 6/10/22), темніші
   ink-2/ink-3, інший відтінок --info (245 проти 220). Через це кіт і
   сторінки виглядали як дві різні системи. Тепер джерело одне.

   ШАР 2 — доповнення, яких у джерелі не було (відступи, хіт-таргети,
   щільність, кільця фокуса, --font-num). Вони НІЧОГО не перевизначають.

   ZERO hex · ZERO rgba · тільки oklch.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── ШАР 1 · КАНОН КІТА ─────────────────────────────────────── */
  --page:oklch(0.94 0.018 80);
  --paper:oklch(0.99 0.003 82);
  --paper-2:oklch(0.96 0.010 82);
  --line:oklch(0.86 0.008 80);
  --line-soft:oklch(0.91 0.008 80);

  --ink-0:oklch(0.20 0.005 80);
  --ink-1:oklch(0.36 0.005 80);
  --ink-2:oklch(0.54 0.005 80);
  --ink-3:oklch(0.68 0.005 80);

  --sage-0:oklch(0.43 0.060 155);
  --sage-line:oklch(0.55 0.060 155);
  --sage-bg:oklch(0.91 0.025 155);
  --sage-bg-2:oklch(0.94 0.018 155);
  --on-sage:oklch(0.97 0.020 155);

  --good:oklch(0.48 0.060 155);   --good-bg:oklch(0.92 0.025 155);
  --bad:oklch(0.50 0.140 25);     --bad-bg:oklch(0.93 0.040 25);
  --warn:oklch(0.62 0.095 70);    --warn-bg:oklch(0.94 0.035 70);
  --info:oklch(0.50 0.085 220);   --info-bg:oklch(0.93 0.030 220);

  --r-sm:6px; --r-md:10px; --r-lg:22px; --r-pill:999px;

  --sh-low:0 1px 2px oklch(0.20 0.005 80/0.04),0 2px 6px oklch(0.20 0.005 80/0.04);
  --sh-mid:0 6px 20px -8px oklch(0.20 0.005 80/0.12);
  --sh-pop:0 24px 56px -20px oklch(0.20 0.005 80/0.35);

  --font-ui:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;   /* ТІЛЬКИ мікро-лейбли, коди, клавіші */
  --font-serif:'Crimson Pro',Georgia,serif;

  /* ── ШАР 2 · ДОПОВНЕННЯ (нічого не перевизначають) ──────────── */

  /* Числа · Public Sans tabular (рішення власника 05.09.2026):
     перекреслений нуль моно рябить на довгій роботі зі стовпцями сум. */
  --font-num:'Public Sans',system-ui,sans-serif;

  /* Поверхні й лінії, потрібні ЕРП і терміналам (кіт ними не користується) */
  --paper-3:oklch(0.93 0.012 82);
  --line-strong:oklch(0.74 0.010 80);

  /* Світліший sage для темної теми й ховерів */
  --sage-1:oklch(0.52 0.065 155);

  /* Лінії семантики — рамки банерів і смуг стану */
  --bad-line:oklch(0.68 0.100 25);
  --warn-line:oklch(0.74 0.080 70);
  --info-line:oklch(0.68 0.070 220);
  --on-dark:oklch(0.98 0.004 80);

  /* Складські / документні тони — псевдоніми семантики, не нові кольори */
  --stock-ok:var(--good);       --stock-ok-bg:var(--good-bg);
  --stock-low:var(--warn);      --stock-low-bg:var(--warn-bg);
  --stock-zero:var(--bad);      --stock-zero-bg:var(--bad-bg);
  --stock-transit:var(--info);  --stock-transit-bg:var(--info-bg);

  /* Відступи · єдина шкала */
  --space-xxs:4px; --space-xs:8px; --space-sm:12px;
  --space-md:16px; --space-lg:24px; --space-xl:32px; --space-xxl:48px;

  /* Дрібний радіус для чипів і бейджів (кіт починає з 6) */
  --r-xs:4px;

  /* Хіт-таргети й рядки · база = comfortable */
  --h-ctl-sm:36px;
  --h-ctl:44px;      /* мінімум для миші + клавіатури */
  --h-ctl-lg:56px;   /* тачскрін / головна дія */
  --h-ctl-xl:72px;   /* «Оплатити» */
  --h-row:52px;      /* рядок позиції в документі */
  --h-row-sm:40px;   /* рядок довідкової таблиці */
  --pad-card:var(--space-lg);

  /* Типографічна шкала */
  --t-micro:10px; --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:18px;
  --t-xl:22px; --t-2xl:30px; --t-3xl:44px; --t-4xl:64px; --t-5xl:88px;
  --ls-micro:0.14em;

  /* Фокус · закон №1 клавіатурного інтерфейсу */
  --focus-ring:0 0 0 2px var(--paper),0 0 0 4.5px oklch(0.43 0.060 155/0.55);
  --focus-ring-bad:0 0 0 2px var(--paper),0 0 0 4.5px oklch(0.50 0.140 25/0.55);

  --t-fast:120ms; --t-base:180ms; --ease:cubic-bezier(.2,.7,.3,1);

  /* Семантичні псевдоніми шкали · для atoms.css і будь-якого нового шару.
     Роль важливіша за розмір: .tbl бере --t-cell, а не «13.5px», тож зміна
     щільності лишається однією правкою. Значення виведені зі шкали вище. */
  --t-cell:var(--t-sm);      /* клітинка таблиці, пігулка, кнопка */
  --t-card:var(--t-lg);      /* заголовок картки .card-h h3 */
  --t-meta:var(--t-xs);      /* хінт, підпис сегмента, .sub */

  /* Тривалості за наміром, не за числом */
  --e-quick:var(--t-fast);   /* ховер, фокус, зміна тону */
  --e-base:var(--t-base);    /* трансформи, розкриття */
  --e-enter:260ms;           /* вхід оверлея — довший, бо це зміна контексту */
  --ease-pop:cubic-bezier(.2,.9,.3,1.1);  /* легкий overshoot на вході вікна */

  /* Підкладка оверлея · та сама база, що й тіні (ink-0 у oklch) */
  --scrim:oklch(0.20 0.005 80/0.42);
}

/* ── РОЗГАЛУЖЕННЯ · єдина дозволена різниця між екранами ──────────
   Хаб і кіт — база. ЕРП з великою таблицею — compact. Каса й наряд — touch.
   Міняються ТІЛЬКИ висоти й щільність: жодного власного кольору, радіуса
   чи шрифта на гілці. */
[data-density="compact"]{
  --h-ctl-sm:30px; --h-ctl:38px; --h-ctl-lg:46px; --h-ctl-xl:58px;
  --h-row:40px; --h-row-sm:32px; --pad-card:var(--space-md);
  --t-md:14px; --t-sm:12.5px;
}
[data-density="touch"]{
  --t-cell:14px;
  --h-ctl-sm:44px; --h-ctl:56px; --h-ctl-lg:68px; --h-ctl-xl:84px;
  --h-row:64px; --h-row-sm:52px; --pad-card:var(--space-lg);
  --t-sm:14px;
}

/* Скидання · шрифт елементів форми не успадковується сам собою,
   і без цього кнопка тихо падає в системний Arial повз шкалу кіта. */
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
html,body{margin:0;padding:0;background:var(--page);color:var(--ink-1);font-family:var(--font-ui);-webkit-font-smoothing:antialiased}
body{min-height:100vh;font-size:var(--t-md)}

/* Числа — завжди --font-num, завжди табличні */
.num,.o-num{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--ink-0);letter-spacing:-0.01em}
/* Мікро-лейбл */
.o-lbl{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--ink-3);line-height:1.2}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   ТЕМНА ТЕМА · ОДНЕ джерело (світла лишається каноном).
   Перерахована під зведену базу: hue 80/82, --info на 220.
   Жоден компонент не має власних кольорів поза токенами — тому
   і кіт, і хаб, і термінали темніють разом.
   ═══════════════════════════════════════════════════════════════ */
/* Один блок темних токенів на два входи — без дубля під медіа-запит:
   • data-theme="dark"           — людина обрала темну явно;
   • data-theme="auto" + .sys-dark — система темна, вибору ще не робили.
     Клас ставить оболонка з matchMedia (див. index.html): медіа-запит не може
     «успадкувати» готовий блок, а дублювати 40 токенів = форк канону. */
html[data-theme="dark"],html[data-theme="auto"].sys-dark{
  --page:oklch(0.185 0.006 80);
  --paper:oklch(0.250 0.006 82);
  --paper-2:oklch(0.290 0.006 82);
  --paper-3:oklch(0.330 0.007 82);
  --line:oklch(0.390 0.008 80);
  --line-soft:oklch(0.320 0.007 80);
  --line-strong:oklch(0.510 0.010 80);

  --ink-0:oklch(0.970 0.004 80);
  --ink-1:oklch(0.885 0.004 80);
  --ink-2:oklch(0.790 0.005 80);
  --ink-3:oklch(0.700 0.005 80);   /* AA на темних --paper і --paper-2 */

  --sage-0:oklch(0.720 0.075 155);
  --sage-1:oklch(0.800 0.070 155);
  --sage-line:oklch(0.620 0.070 155);
  --sage-bg:oklch(0.330 0.045 155);
  --sage-bg-2:oklch(0.285 0.030 155);
  --on-sage:oklch(0.175 0.030 155);

  --good:oklch(0.740 0.075 155);  --good-bg:oklch(0.310 0.040 155);
  --bad:oklch(0.700 0.130 25);    --bad-bg:oklch(0.315 0.055 25);   --bad-line:oklch(0.560 0.110 25);
  --warn:oklch(0.790 0.110 70);   --warn-bg:oklch(0.330 0.050 70);  --warn-line:oklch(0.590 0.090 70);
  --info:oklch(0.745 0.090 220);  --info-bg:oklch(0.305 0.045 220); --info-line:oklch(0.555 0.080 220);
  --on-dark:oklch(0.980 0.004 80);

  --sh-low:0 1px 2px oklch(0 0 0/0.40),0 2px 8px oklch(0 0 0/0.30);
  --sh-mid:0 8px 24px -8px oklch(0 0 0/0.55);
  --sh-pop:0 28px 64px -20px oklch(0 0 0/0.72);

  --focus-ring:0 0 0 2px var(--page),0 0 0 4.5px oklch(0.720 0.075 155/0.65);
  --focus-ring-bad:0 0 0 2px var(--page),0 0 0 4.5px oklch(0.700 0.130 25/0.65);
  color-scheme:dark;
}