/* ═══════════════════════════════════════════════════════════════
   R4S Design System v4 — Tokens
   Premium Enterprise Minimalism
   Подключать ПЕРВЫМ, до main.css и components.css
   ═══════════════════════════════════════════════════════════════ */

/* Шрифт вшит в /fonts (лицензия OFL, файл рядом). Раньше он шёл
   с Google CDN: на слабом интернете интерфейс проваливался
   в системный шрифт, а заявленное «без внешних зависимостей»
   не выполнялось. Вариативный файл — все веса 400–700 в одном. */
@font-face{
  font-family:'Golos Text';
  src:url('../fonts/golos-text-cyrillic-wght-normal.woff2') format('woff2-variations'),
      url('../fonts/golos-text-cyrillic-wght-normal.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Golos Text';
  src:url('../fonts/golos-text-latin-wght-normal.woff2') format('woff2-variations'),
      url('../fonts/golos-text-latin-wght-normal.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{

  /* ─────────────────────────────────────────────
     1. ПРИМИТИВЫ — сырые значения, в разметке не использовать
     ───────────────────────────────────────────── */

  /* Холодная серо-голубая шкала. Чёрного нет. */
  --c-000:#ffffff;
  --c-025:#fcfdff;
  --c-050:#f6f8fb;
  --c-100:#eef1f6;
  --c-125:#eff2f8;
  --c-150:#e8ecf2;
  --c-200:#dde3ec;
  --c-300:#c6cfdc;
  --c-400:#98a4b3;
  --c-500:#7a8797;
  --c-600:#5f6b7d;
  --c-700:#414d60;
  --c-800:#2b3547;
  --c-900:#1d2433;
  --c-950:#141a26;

  /* Смысловые цвета. Приглушённые, не кислотные. */
  --c-ok:#4d9b6a;
  --c-ok-soft:#e6f3ea;
  --c-warn:#c99a3d;
  --c-warn-soft:#fbf3e2;
  --c-crit:#c85f52;
  --c-crit-soft:#fbeceb;
  --c-info:#5b7fc4;
  --c-info-soft:#eaf0fb;

  /* Брендовый акцент. Единственный «активный» цвет системы. */
  --c-brand:#4a6ea8;
  --c-brand-soft:#eaf0f9;
  --c-brand-ring:rgba(74,110,168,.18);

  /* ─────────────────────────────────────────────
     2. ГРЕЙДЫ — единственный источник правды.
     В js/config.js оставить только label / name / icon / cls.
     ───────────────────────────────────────────── */

  --g1-fill:#c4b5fd; --g1-bg:#ede9fe; --g1-ink:#7c3aed;
  --g2-fill:#86efac; --g2-bg:#dcfce7; --g2-ink:#16a34a;
  --g3-fill:#fde68a; --g3-bg:#fef9c3; --g3-ink:#ca8a04;
  --g4-fill:#fec89a; --g4-bg:#fff1e6; --g4-ink:#ea580c;
  --g5-fill:#fbcfe8; --g5-bg:#fce7f3; --g5-ink:#be185d;
  --g6-fill:#93c5fd; --g6-bg:#dbeafe; --g6-ink:#2563eb;
  --g7-fill:#a7c4b5; --g7-bg:#e8f0ec; --g7-ink:#4d7c62;
  --g8-fill:#8895a7; --g8-bg:#e2e6ec; --g8-ink:#475569;
  --g9-fill:#d1d5db; --g9-bg:#f3f4f6; --g9-ink:#6b7280;

  /* Статусы блоков */
  --st-rent:#16a34a;
  --st-smr:#3b82f6;
  --st-empty:#9ca3af;
  --st-frozen:#6366f1;
  --st-sold:#dc2626;

  /* ─────────────────────────────────────────────
     3. СЕМАНТИКА ПОВЕРХНОСТЕЙ — использовать в компонентах
     ───────────────────────────────────────────── */

  --bg-app:var(--c-125);        /* первый уровень: фон приложения */
  --bg-surface:var(--c-000);    /* второй уровень: карточки, панели */
  --bg-surface-alt:var(--c-025);
  --bg-sunken:var(--c-050);     /* шапки таблиц, поля ввода */
  --bg-hover:rgba(29,36,51,.028);
  --bg-active:rgba(29,36,51,.05);
  --bg-shell:var(--c-025);      /* сайдбар — светлый, как рабочие поверхности */
  --nav-active:var(--c-brand-soft);

  --ink-900:#151a22;
  --text-primary:var(--c-900);
  --text-secondary:var(--c-600);
  --text-tertiary:var(--c-400);
  --text-inverse:var(--c-050);
  --text-on-brand:#ffffff;

  --border-hairline:rgba(20,30,50,.05);
  --border-soft:rgba(20,30,50,.08);
  --border-strong:rgba(20,30,50,.12);

  /* ─────────────────────────────────────────────
     4. ТИПОГРАФИКА
     ───────────────────────────────────────────── */

  --font-ui:'Golos Text','Segoe UI',system-ui,sans-serif;
  --font-num:'Golos Text',system-ui,sans-serif; /* с tabular-nums */

  --fs-display:40px;
  --fs-h1:32px;
  --fs-h2:26px;
  --fs-h3:22px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-caption:14px;
  --fs-small:13px;
  --fs-tiny:12px;

  /* Кириллице нужен чуть больший интерлиньяж, чем латинице */
  --lh-tight:1.2;
  --lh-heading:1.28;
  --lh-body:1.55;
  --lh-dense:1.4;   /* строки таблиц */

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

  --ls-display:-.02em;
  --ls-heading:-.012em;
  --ls-body:0;
  --ls-label:.01em;   /* вместо uppercase + широкого трекинга */

  /* ─────────────────────────────────────────────
     5. ПРОСТРАНСТВО
     ───────────────────────────────────────────── */

  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:24px;  --sp-6:32px;  --sp-7:40px;  --sp-8:48px;  --sp-9:64px;

  /* ─────────────────────────────────────────────
     6. СКРУГЛЕНИЯ
     ───────────────────────────────────────────── */

  --r-xs:8px;
  --r-sm:12px;    /* бейджи, пилюли, мелкие кнопки */
  --r-md:16px;    /* поля ввода, кнопки */
  --r-lg:22px;    /* карточки */
  --r-xl:26px;    /* крупные контейнеры */
  --r-2xl:30px;   /* модальные окна */
  --r-img:20px;
  --r-full:999px;

  /* ─────────────────────────────────────────────
     7. ТЕНИ — задача отделить от фона, а не показать высоту
     ───────────────────────────────────────────── */

  --sh-flat:0 1px 2px rgba(20,30,50,.04);
  --sh-card:0 1px 2px rgba(20,30,50,.04), 0 8px 20px -12px rgba(20,30,50,.10);
  --sh-raised:0 2px 4px rgba(20,30,50,.05), 0 16px 32px -16px rgba(20,30,50,.14);
  --sh-modal:0 32px 64px -24px rgba(20,30,50,.22), 0 2px 8px rgba(20,30,50,.06);
  --sh-ring:0 0 0 3px var(--c-brand-ring);

  /* ─────────────────────────────────────────────
     8. ДВИЖЕНИЕ
     ───────────────────────────────────────────── */

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:180ms;
  --dur-base:220ms;
  --dur-slow:250ms;
  --tr-base:all var(--dur-base) var(--ease);
  --tr-color:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);

  /* ─────────────────────────────────────────────
     9. КОМПОНЕНТНЫЕ РАЗМЕРЫ
     ───────────────────────────────────────────── */

  --sidebar-w:264px;
  --topbar-h:68px;
  --card-pad:var(--sp-5);
  --card-pad-lg:var(--sp-6);
  --row-h:52px;          /* высокие строки, не Excel */
  --control-h:44px;
  --icon-stroke:1.5;

  --z-content:1;
  --z-topbar:90;
  --z-sidebar:100;
  --z-modal:200;
  --z-toast:300;
}

/* ═══════════════════════════════════════════════
   ТЁМНАЯ ТЕМА
   ═══════════════════════════════════════════════ */
[data-theme="dark"]{
  --bg-app:#12161f;
  --bg-surface:#1a1f2b;
  --bg-surface-alt:#1e2432;
  --bg-sunken:#161b25;
  --bg-hover:rgba(255,255,255,.035);
  --bg-active:rgba(255,255,255,.06);
  --bg-shell:#161b25;
  --nav-active:rgba(127,163,221,.14);

  --text-primary:#e6eaf1;
  --text-secondary:#9aa6b8;
  --text-tertiary:#6b7789;

  --border-hairline:rgba(255,255,255,.05);
  --border-soft:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.13);

  --c-brand:#7fa3dd;
  --c-brand-soft:rgba(127,163,221,.12);
  --c-brand-ring:rgba(127,163,221,.25);

  --c-ok-soft:rgba(77,155,106,.14);
  --c-warn-soft:rgba(201,154,61,.14);
  --c-crit-soft:rgba(200,95,82,.14);
  --c-info-soft:rgba(91,127,196,.14);

  /* Пастель грейдов на тёмном превращается в подсветку той же тональности */
  --g1-bg:color-mix(in srgb,var(--g1-fill) 13%,transparent); --g1-ink:var(--g1-fill);
  --g2-bg:color-mix(in srgb,var(--g2-fill) 13%,transparent); --g2-ink:var(--g2-fill);
  --g3-bg:color-mix(in srgb,var(--g3-fill) 13%,transparent); --g3-ink:var(--g3-fill);
  --g4-bg:color-mix(in srgb,var(--g4-fill) 13%,transparent); --g4-ink:var(--g4-fill);
  --g5-bg:color-mix(in srgb,var(--g5-fill) 13%,transparent); --g5-ink:var(--g5-fill);
  --g6-bg:color-mix(in srgb,var(--g6-fill) 13%,transparent); --g6-ink:var(--g6-fill);
  --g7-bg:color-mix(in srgb,var(--g7-fill) 15%,transparent); --g7-ink:#b9d3c5;
  --g8-bg:color-mix(in srgb,var(--g8-fill) 15%,transparent); --g8-ink:#aab6c6;
  --g9-bg:color-mix(in srgb,var(--g9-fill) 12%,transparent); --g9-ink:#b6bcc6;

  --sh-card:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5);
  --sh-raised:0 2px 4px rgba(0,0,0,.35), 0 16px 32px -16px rgba(0,0,0,.6);
  --sh-modal:0 32px 64px -24px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════
   БАЗА
   ═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-ui);
  font-size:var(--fs-caption);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--text-primary);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}

h1,h2,h3,h4{line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:var(--fw-semibold)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

/* Все цифры в интерфейсе выстраиваются по разрядам */
table,input,.num,.stat-value,td,th{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

:focus-visible{outline:none;box-shadow:var(--sh-ring);border-radius:var(--r-sm)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--c-400);background-clip:content-box}

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