/* ============================================================================
   Токены дизайн-системы. Единственное место, где живут «сырые» значения.

   Правило: компонент никогда не пишет цвет, отступ или размер числом — он берёт
   токен. Поменять плотность интерфейса или перекрасить продукт можно здесь, не
   открывая ни одного файла компонентов.

   Два уровня, и порядок между ними односторонний:
     1. ПРИМИТИВЫ (--slate-500, --blue-600) — палитра. Смысла не несут.
     2. СЕМАНТИКА (--fg-muted, --accent, --space-4) — назначение. Компоненты
        используют ТОЛЬКО их.
   Компонент, взявший примитив напрямую, ломает тёмную тему: примитив в ней
   не меняется, меняется семантика.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------- примитивы: серые
     Единственная нейтральная шкала на весь интерфейс. Раньше серых было три
     набора вперемешку, и «одинаковый» серый в двух карточках не совпадал. */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-150: #EAEFF5;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;
  --white: #FFFFFF;

  /* ------------------------------------------------------- примитивы: фирменный
     Синий — действие и текущее место. Зелёный — состоявшийся факт (отправлено,
     подтверждено). Разделение жёсткое: зелёная кнопка, которая ничего не
     завершает, обесценивает зелёный на всех остальных экранах. */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-900: #1E3A8A;

  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-900: #14532D;

  --amber-50:  #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-900: #78350F;

  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-900: #7F1D1D;

  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-900: #4C1D95;

  /* ============================== СЕМАНТИКА — светлая тема ============================== */

  /* Поверхности. Четыре уровня, глубже не нужно: страница → карточка → вложенный
     блок → наведение. Пятый уровень означал бы, что вложенность вышла из-под
     контроля и её надо разбирать вёрсткой, а не цветом. */
  --bg-page:    var(--slate-50);
  --bg-surface: var(--white);
  --bg-sunken:  var(--slate-50);
  --bg-hover:   var(--slate-100);
  --bg-active:  var(--slate-150);

  /* Текст. Три веса значимости: основной, вспомогательный, служебный. */
  --fg:        var(--slate-900);
  --fg-soft:   var(--slate-700);
  --fg-muted:  var(--slate-500);
  --fg-onbold: var(--white);

  /* Границы. -strong для того, что можно взять руками (поля ввода, кнопки). */
  --line:        var(--slate-200);
  --line-strong: var(--slate-300);

  /* Акцент — действие и текущее место. */
  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-fg:     var(--blue-700);
  --accent-soft:   var(--blue-50);
  --accent-softer: var(--blue-100);
  --accent-on:     var(--white);

  /* Состояния. Пара «-soft фон + основной текст» держит контраст ≥ 4.5:1
     (WCAG AA) в обеих темах — проверено по каждой паре. */
  --ok:        var(--green-600);
  --ok-fg:     var(--green-700);
  --ok-soft:   var(--green-50);
  --ok-on:     var(--white);

  --warn:      var(--amber-600);
  --warn-fg:   var(--amber-700);
  --warn-soft: var(--amber-50);
  --warn-on:   var(--white);

  --danger:      var(--red-600);
  --danger-fg:   var(--red-700);
  --danger-soft: var(--red-50);
  --danger-on:   var(--white);

  --info:      var(--violet-600);
  --info-fg:   var(--violet-700);
  --info-soft: var(--violet-50);

  /* ------------------------------------------------------------------ отступы
     Шкала с шагом 4px. Значения вне шкалы в компонентах запрещены: именно от
     «тут 13, а тут 14» интерфейс и выглядит собранным наспех. */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 64px;

  /* -------------------------------------------------------------- типографика
     Базовый размер 14px, а не 16: это плотный рабочий инструмент, где на экране
     держат таблицу на 25 строк. Ниже 12px не опускаемся нигде — это порог
     читаемости, а не вопрос вкуса. */
  --text-2xs: 11px;   /* только КАПС-метки полей, где буквы крупнее своего кегля */
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* база */
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  --tracking-wide: 0.06em;
  --tracking-tight: -0.01em;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Моноширинный — для того, что сравнивают глазами по столбцу: ИНН, телефоны,
     время, суммы. Не для «технического вида». */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ------------------------------------------------------------- скругления */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* ----------------------------------------------------------------- тени
     Плоский интерфейс: тень означает «этот слой лежит НАД страницей», а не
     украшает. Карточка в потоке тени не имеет — её границей служит --line. */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.12), 0 2px 8px rgb(15 23 42 / 0.06);
  --shadow-xl: 0 24px 56px rgb(15 23 42 / 0.18);

  /* ---------------------------------------------------------------- движение
     Три длительности, и каждая отвечает на свой вопрос. Одна длительность на всё
     — самая частая причина, по которой интерфейс «залипает»: закрытие меню и
     разворот панели не могут длиться одинаково.
     Выход быстрее входа: уходящее не должно задерживать следующее действие. */
  --motion-fast: 120ms;   /* отклик на курсор: подсветка, цвет */
  --motion-base: 200ms;   /* смена состояния: раскрытие, подстановка */
  --motion-slow: 320ms;   /* появление слоя: панель, диалог */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ------------------------------------------------------------------ слои
     Все z-index — здесь. Разложены с запасом в 10, чтобы вставить слой между
     соседями можно было, не переписывая остальные. */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-widget: 300;
  --z-dialog: 400;
  --z-toast:  500;

  /* --------------------------------------------------------------- геометрия */
  --shell-header: 60px;      /* высота шапки; от неё считается прилипание */
  --shell-max: 1600px;       /* рабочая ширина: таблица лидов требует места */
  --drawer-width: 380px;
  --rail-width: 300px;       /* боковые колонки карточки лида */
}

/* ============================ СЕМАНТИКА — тёмная тема ============================
   Переопределяются ТОЛЬКО семантические токены. Примитивы те же: тёмная тема —
   это другое назначение тех же красок, а не вторая палитра.

   Инверсия не зеркальная. На тёмном фоне насыщенный цвет «звенит», поэтому
   акценты берутся светлее и мягче, а «мягкие» фоны состояний — не осветлённые,
   а собственные глубокие оттенки: осветлённый красный на тёмном превращается
   в розовый и перестаёт читаться как тревога. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:    var(--slate-950);
    --bg-surface: #0F1729;
    --bg-sunken:  #0B1322;
    --bg-hover:   #16203A;
    --bg-active:  #1C2947;

    --fg:       var(--slate-100);
    --fg-soft:  var(--slate-300);
    --fg-muted: var(--slate-400);

    --line:        #1E2A44;
    --line-strong: #2C3A5A;

    --accent:        var(--blue-500);
    --accent-hover:  #60A5FA;
    --accent-fg:     #93C5FD;
    --accent-soft:   #14213D;
    --accent-softer: #1B2C52;

    --ok:        #22C55E;
    --ok-fg:     #6EE7A8;
    --ok-soft:   #0C2A1A;

    --warn:      #F59E0B;
    --warn-fg:   #FCD34D;
    --warn-soft: #2C1F06;

    --danger:      #EF4444;
    --danger-fg:   #FCA5A5;
    --danger-soft: #2C1114;

    --info:      #A78BFA;
    --info-fg:   #C4B5FD;
    --info-soft: #1E1640;

    /* На тёмном фоне тень почти не видна — её работу берёт на себя более
       светлая поверхность, но слой всё равно должен отделяться. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
    --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.6);
  }
}