/* TSOY ID · дизайн-токены (§10.3). Акцент --ink перекрашивается из админки. */

:root {
  /* Радиусы и тени */
  --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 24px;

  /* Шкала отступов, шаг 4px. До v3.1 здесь лежал одинокий --space: 4px, который
     не использовался нигде ни разу, а по файлу жили 6/7/9/10/11/14/18/22px. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Пороги адаптива. Их четыре, и других быть не должно — иначе поведение
     перестаёт быть предсказуемым (в v3.0 их было семь, включая разовый 921px).
       360  очень узкие телефоны
       480  узкие
       640  телефон → планшет
      1024  планшет → десктоп
     Медиазапросы не умеют читать переменные, поэтому это контракт, а не код. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-2: 0 1px 3px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .06);
  --shadow-3: 0 4px 8px rgb(0 0 0 / .06), 0 12px 32px rgb(0 0 0 / .10);

  /* Цвет: чернильный синий + тёплые серые.
     Три переменные акцента вместо одной — потому что акцент задаёт владелец
     установки, и один и тот же цвет не годится и под заливку, и под текст:
       --ink       заливка (кнопка, активная вкладка, полоса прогресса);
       --on-ink    текст ПОВЕРХ заливки — белый или почти чёрный, что контрастнее;
       --ink-text  акцент КАК текст на фоне страницы (ссылки, badge).
     При смене акцента из админки все три считает App\Core\Palette по WCAG. */
  --ink: #1D4ED8;
  --on-ink: #FFFFFF;
  --ink-text: #1D4ED8;
  --ink-soft: color-mix(in srgb, var(--ink) 10%, transparent);
  --ink-border: color-mix(in srgb, var(--ink) 35%, transparent);
  --bg: #F5F5F4;
  --surface: #FFFFFF;
  --surface-2: #FAFAF9;
  --text: #1C1917;
  --text-2: #57534E;
  /* 4.62:1 на самом светлом фоне страницы. Прежний #A8A29E давал 2.52 —
     вдвое ниже нормы AA, а подсказки в этом интерфейсе стоят под каждым
     полем: это был не нюанс оформления, а нечитаемый текст. */
  --text-3: #736E69;
  --line: #E7E5E4;
  --line-strong: #D6D3D1;

  /* Семантика. --on-* — текст поверх сплошной заливки этим цветом: в тёмной теме
     семантические цвета светлые, и белый текст на них так же нечитаем, как на
     светлом акценте. */
  --success: #15803D; --success-bg: #F0FDF4; --on-success: #FFFFFF;
  --warning: #B45309; --warning-bg: #FFFBEB; --on-warning: #FFFFFF;
  --danger:  #B91C1C; --danger-bg:  #FEF2F2; --on-danger:  #FFFFFF;

  --focus: 0 0 0 3px color-mix(in srgb, var(--ink) 30%, transparent);

  /* Анимация: единые кривые вместо ad-hoc ease-out */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;

  /* Слои: одна шкала вместо магических чисел по файлу */
  --z-sticky: 40; --z-dropdown: 50; --z-drawer: 70; --z-modal: 90; --z-toast: 100;

  /* Типографика */
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-36: 36px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #60A5FA;
  --on-ink: #12100E;
  --ink-text: #60A5FA;
  --bg: #1C1917;
  --surface: #292524;
  --surface-2: #24211E;
  --text: #FAFAF9;
  --text-2: #A8A29E;
  /* 4.64:1 на поверхности карточки — худшем фоне тёмной темы.
     Прежний #78716C давал 3.16. */
  --text-3: #948D87;
  --line: #44403C;
  --line-strong: #57534E;
  --success: #4ADE80; --success-bg: rgb(74 222 128 / .10); --on-success: #12100E;
  --warning: #FBBF24; --warning-bg: rgb(251 191 36 / .10); --on-warning: #12100E;
  --danger:  #F87171; --danger-bg:  rgb(248 113 113 / .10); --on-danger:  #12100E;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3);
  --shadow-2: 0 1px 3px rgb(0 0 0 / .35), 0 4px 12px rgb(0 0 0 / .35);
  --shadow-3: 0 4px 8px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}