/* ============================================================================
   EFFISCORE — design tokens
   Единственный источник цвета, шага, радиуса, тени и времени.
   Правило: компонент НЕ пишет сырое значение. Если нужного токена нет —
   добавляется токен, а не исключение в компоненте.

   Цвет в OKLCH намеренно: в HSL шкала «одна и та же яркость на разных
   оттенках» врёт, и голубой пикеров рядом с янтарным пакеров выглядел
   тусклее при одинаковых числах. В OKLCH L действительно про яркость,
   поэтому пары акцентов можно уравнять по светлоте, а не на глаз.
   Baseline 2023 — Chrome на Маке и на телевизоре понимает.
   ============================================================================ */

:root {
  /* ---- поверхности: одна нейтраль, пять ступеней ------------------------ */
  --c-bg:        oklch(0.155 0.012 258);   /* фон страницы */
  --c-surface-1: oklch(0.200 0.013 258);   /* панель лиги, карточка */
  --c-surface-2: oklch(0.243 0.014 258);   /* строка рейтинга */
  --c-surface-3: oklch(0.290 0.015 258);   /* hover, приподнятое */
  --c-line:      oklch(0.330 0.014 258);   /* заметная граница */
  --c-line-soft: oklch(0.262 0.012 258);   /* разделитель внутри панели */

  /* ---- текст: три ступени, дальше не дробим ----------------------------- */
  --c-text:   oklch(0.965 0.005 258);
  --c-text-2: oklch(0.790 0.014 258);      /* подписи, единицы */
  --c-text-3: oklch(0.620 0.016 258);      /* только крупный/декоративный */

  /* ---- роли. L выровнена (0.80/0.83), чтобы ни один не «тише» ----------- */
  --c-pick: oklch(0.800 0.130 200);        /* пікінг */
  --c-pack: oklch(0.830 0.145 78);         /* пакінг */

  /* ---- состояния -------------------------------------------------------- */
  --c-up:      oklch(0.800 0.160 155);
  --c-down:    oklch(0.700 0.160 25);
  --c-warn:    oklch(0.800 0.150 75);
  --c-info:    oklch(0.760 0.120 250);
  --c-neutral: oklch(0.620 0.016 258);

  /* ---- три опорні цифри рядка ТВ (05.08.2026) — рознесені по колу
         приблизно на 110°, L/C вирівняні, щоб жодна не читалась тьмянішою
         за сусідку. Навмисно не перетинаються з pick/pack/up/down/gold —
         жодна з них не з'являється в тому самому рядку, що ці три числа. */
  --c-num-pr: oklch(0.800 0.105 340);      /* лок./замовлень — рожевий */
  --c-num-it: oklch(0.800 0.115 130);      /* кількість — зелений */
  --c-num-wt: oklch(0.800 0.100 230);      /* вага — блакитний */

  /* ---- подиум. Серебро почти без хромы: цветное «серебро» читается
         как второй золотой и ломает иерархию тройки ---------------------- */
  --c-gold:   oklch(0.860 0.140 88);
  --c-silver: oklch(0.860 0.012 258);
  --c-bronze: oklch(0.700 0.110 52);

  /* ---- шаг: база 4px ---------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---- радиусы концентричные: внешний = внутренний + padding ------------ */
  --r-1: 4px;    /* бейдж */
  --r-2: 8px;    /* кнопка, строка рейтинга */
  --r-3: 14px;   /* панель (8 + 6 внутреннего отступа) */
  --r-4: 20px;   /* модальное окно */
  --r-pill: 999px;

  /* ---- границы ---------------------------------------------------------- */
  --b-hair: 1px solid var(--c-line-soft);
  --b-1:    1px solid var(--c-line);

  /* ---- тени слоями, не одной ------------------------------------------- */
  --sh-1: 0 1px 2px oklch(0 0 0 / .30);
  --sh-2: 0 2px 4px oklch(0 0 0 / .28), 0 8px 16px oklch(0 0 0 / .22);
  --sh-3: 0 4px 8px oklch(0 0 0 / .30), 0 24px 48px oklch(0 0 0 / .35);

  /* ---- движение --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;   /* нажатие */
  --t-fast:  180ms;   /* наведение, цвет */
  --t-base:  240ms;   /* появление, вкладки */
  --t-slow:  320ms;   /* панель, шторка */
  /* Перестановка мест — намеренно длиннее потолка в 300 мс: это ЕДИНСТВЕННАЯ
     анимация, которую человек в цеху должен успеть прочитать («он обогнал»).
     Остальные обязаны быть быстрее, чем их замечают. */
  --t-rank:  640ms;

  /* ---- слои ------------------------------------------------------------- */
  --z-base: 0; --z-sticky: 50; --z-drawer: 95; --z-modal: 300; --z-toast: 400;

  /* ---- типографика ------------------------------------------------------ */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Экранный интерфейс — фиксированная rem-шкала, шаг 1.125–1.2.
     Плавающие clamp-размеры оправданы только на телевизоре, где расстояние
     до экрана меняется вместе с диагональю; за ноутбуком оно постоянное. */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-21: 21px; --fs-26: 26px; --fs-32: 32px;

  --lh-tight: 1.15;   /* заголовки, цифры */
  --lh-ui:    1.35;   /* подписи, кнопки */
  --lh-text:  1.55;   /* абзацы */

  --ls-caps: 0.08em;  /* мелкие капсы */
  --ls-head: -0.01em; /* крупные заголовки */

  /* ---- совместимость со старой разметкой (постепенно вытесняется) ------- */
  --bg: var(--c-bg);
  --bg-panel: var(--c-surface-1);
  --bg-panel-2: var(--c-surface-2);
  --bg-row: var(--c-surface-2);
  --bg-row-hover: var(--c-surface-3);
  --border: var(--c-line-soft);
  --border-strong: var(--c-line);
  --text: var(--c-text);
  --text-dim: var(--c-text-2);
  --text-faint: var(--c-text-3);
  --picker: var(--c-pick);
  --packer: var(--c-pack);
  --up: var(--c-up);
  --down: var(--c-down);
  --gold: var(--c-gold);
  --silver: var(--c-silver);
  --bronze: var(--c-bronze);
  --live: var(--c-up);
  --final: var(--c-info);
  --stale: var(--c-warn);
  --error: var(--c-down);
  --processing: oklch(0.760 0.140 300);
  --radius: var(--r-3);
}

/* Уважение к системной настройке. «Меньше движения» — это не «никакого»:
   исчезают перемещения, остаются изменения прозрачности и цвета, без них
   смена состояния читается как поломка. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-press: 1ms; --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-rank: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Клавиатурный фокус виден всегда и одинаково. Отдельное правило, потому что
   :focus-visible на кнопках сбрасывался вместе с outline:none в компонентах. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-pick);
  outline-offset: 2px;
  border-radius: var(--r-2);
}