/* tokens.css — ЕДИНСТВЕННОЕ место значений дизайна (design-plan.md, §1–§2).
   Подключается ПЕРВЫМ в index.html. На шаге D.0 здесь только объявления переменных:
   существующие файлы (styles.css, additional.css, …) на токены ещё не переведены,
   внешний вид не меняется. Перевод — в D.1 (base.css) и далее по подэтапам.

   Правила после D.1 (проверяются на приёмке):
   1. hex-цвета — только в этом файле, в остальных var(--…);
   2. радиусы/тени/отступы — только из шкал --radius-*, --shadow-*, --space-*;
   3. !important — 0; transition — по конкретным свойствам, не all. */

:root {
  /* ── Палитра Notion (светлая тема) ─────────────────────────────── */
  --text: #37352F;             /* основной текст */
  --text-2: #787774;           /* вторичный: подписи, метаданные */
  --text-3: #9B9A97;           /* третичный: заголовки таблиц, подсказки */
  --text-inverse: #FFFFFF;     /* текст на цветных кнопках */

  --bg: #FFFFFF;               /* фон приложения и полей */
  --bg-panel: #F7F7F5;         /* панели: сайдбар, тулбар, шапка таблицы */
  --bg-hover: #EFEFED;         /* наведение на строку/пункт меню */
  --bg-selected: #FDE8DB;      /* выбранный пункт — мягкий оранжевый */
  --bg-code: #F1F1EF;          /* чипы, «тэги», служебные вставки */
  --bg-overlay: rgba(15, 15, 15, 0.4); /* затемнение под модалками и карточкой */
  /* D.1: фон страницы и выключенных элементов (значения прежние, чтобы вид не «прыгал») */
  --bg-page: linear-gradient(135deg, #f0f4f8 0%, #e8f0f5 50%, #eef2f7 100%);
  --bg-disabled: #CCCCCC;      /* выключенная кнопка (sidebar-button:disabled) */

  --border: #E9E9E7;           /* основная линия: разделители, границы панелей */
  --border-field: #DFDFDE;     /* граница полей ввода и кнопок-контуров */

  --accent: #EB6834;           /* акцент: оранжевый marinium */
  --accent-hover: #D1552A;     /* наведение на акцент */
  --accent-soft: #FDEDE4;      /* мягкая заливка акцента (фокус, выбранное) */

  /* Бирюзовый — второй акцент (marinium) */
  --teal: #5FB6C7;
  --teal-hover: #4A9DAD;
  --teal-soft: #E8F4F7;

  --success: #0F7B6C;          /* успех */
  --danger: #EB5757;           /* ошибка, опасное действие */
  --warn: #D9730D;             /* предупреждение */
  --info: #5FB6C7;             /* информационное = бирюзовый marinium */

  /* Мягкие заливки под бейджи-«таблетки» (фон 12–16% того же тона, как в Notion) */
  --success-soft: rgba(15, 123, 108, 0.12);
  --danger-soft: rgba(235, 87, 87, 0.12);
  --warn-soft: rgba(217, 115, 13, 0.12);
  --info-soft: rgba(95, 182, 199, 0.12);
  /* Тёмные оттенки для :hover на цветных кнопках (базовый цвет выше) */
  --success-hover: #0B5D52;
  --danger-hover: #C82333;
  --warn-hover: #B65D0A;

  /* ── Типографика: Inter-подобный стек и шкала ───────────────────── */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  /* D.1: цифры в ячейках таблицы (tabular-nums) — чтобы числа стояли по разрядам */
  --font-variant-numeric: tabular-nums;

  --fs-12: 12px;               /* заголовки таблиц, бейджи, третичный текст */
  --fs-13: 13px;               /* плотный текст, подписи */
  --fs-14: 14px;               /* базовый текст интерфейса */
  --fs-16: 16px;               /* крупный текст, поля форм */
  --fs-20: 20px;               /* заголовок раздела/модалки */
  --fs-24: 24px;               /* заголовок страницы */
  --fs-30: 30px;               /* заголовок вида (page peek / экран входа) */

  --fw-regular: 400;
  --fw-medium: 500;            /* первая ячейка таблицы, названия */
  --fw-semibold: 600;          /* заголовки */
  --lh-tight: 1.2;
  --lh-base: 1.5;              /* основной межстрочный интервал */

  /* ── Радиусы ────────────────────────────────────────────────────── */
  --radius-xs: 2px;            /* стрелки-«треугольники», мелочь */
  --radius-sm: 4px;            /* чипы, маленькие кнопки */
  --radius-sm-plus: 5px;       /* выпадающие списки тулбара (бывш. 5px) */
  --radius-md: 6px;            /* кнопки, поля ввода */
  --radius-lg: 10px;           /* панели, модалки, карточка */
  --radius-pill: 999px;        /* бейджи-«таблетки» */

  /* ── Сетка 4px и отступы ────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Размеры каркаса */
  --header-height: 48px;
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 56px; /* свёрнутый сайдбар — полоска только с иконками */
  --sidebar-icon-size: 24px;       /* иконки сайдбара: 16px * 1.5 */
  --row-height: 36px;          /* строка таблицы: 34–36px */
  --control-height: 32px;      /* высота кнопки/поля ввода (компактный размер Notion) */
  --control-height-sm: 30px;   /* кнопки тулбара и «Выйти» в шапке */
  --icon-button: 28px;         /* квадратные кнопки-иконки (стрелка «столбцы») */
  /* Карточка записи (drawer.css): ширина и пределы перетаскивания ручкой слева.
     Базовая ширина — минимум; тянуть можно до --drawer-width-max, но не шире
     доли окна (--drawer-width-max-vw). Выбор пользователя хранится в браузере. */
  --drawer-width: 520px;       /* ширина по умолчанию = минимально допустимая */
  --drawer-width-max: 1400px;  /* верхний предел в пикселях */
  --drawer-width-max-vw: 92vw; /* верхний предел от ширины окна */
  --drawer-grip: 10px;         /* зона захвата ручки слева (визуально 3px) */
  /* Иконки (public/js/icons.js, icons.css): размер картинки и её варианты.
     Толщина штриха и цвет задаются в самом модуле (stroke=currentColor). */
  --icon-size: 16px;           /* базовая иконка в тексте и кнопках */
  --icon-size-sm: 14px;        /* мелкие кнопки (.btn--sm, чипы) */
  --icon-size-lg: 20px;        /* крупные одиночные иконки */
  --modal-gap: 16px;           /* отступ окна поиска/модалки от края экрана */
  /* Толщины линий: перечёркивания/подчёркивания текста в base.css */
  --line-1: 1px;
  --line-2: 2px;

  /* ── Тени: плоские поверхности, почти без теней ─────────────────── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);   /* поля, мелкие элементы */
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.10);  /* выпадающие списки, тосты */
  --shadow-lg: 0 8px 24px rgba(15, 15, 15, 0.16);  /* модалки, карточка */
  /* Нейтрализованные тени прежних файлов (D.1): вид сохраняется, значение — в токене */
  --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.1);   /* бывший .app-header */
  --shadow-box: 0 10px 40px rgba(0, 0, 0, 0.1);    /* бывший .auth-box */
  --shadow-accent: 0 5px 15px rgba(235, 104, 52, 0.3); /* бывший .auth-button:hover */
  --focus-ring: 0 0 0 3px rgba(235, 104, 52, 0.25); /* фокус-кольцо вокруг полей */

  /* ── Скроллбары (base.css) ──────────────────────────────────────────
     Значения перенесены из additional.css как есть (8px, #f1f1f1/#c1c1c1),
     чтобы D.1 не менял вид; при переделке каркаса (D.2) правится здесь. */
  --scrollbar-size: 8px;
  --scrollbar-track: #F1F1F1;
  --scrollbar-thumb: #C1C1C1;
  --scrollbar-thumb-hover: #A8A8A8;

  /* Фон экрана входа: прохладный градиент (marinium) */
  --auth-bg: linear-gradient(135deg, #f0f4f8 0%, #e8f0f5 50%, #eef2f7 100%);

  /* ── Слои (z-index) ─────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 10;              /* шапка таблицы, тулбар */
  --z-sidebar: 20;
  --z-search: 300;             /* окно поиска (выше карточки, ниже модалок) */
  --z-search-top: 301;         /* строка ввода внутри окна поиска */
  --z-overlay: 900;            /* затемнение под карточкой/модалкой */
  --z-drawer: 1000;            /* карточка записи */
  --z-modal: 1100;             /* модальные окна (в т.ч. поиск) */
  --z-picker: 1200;            /* всплывающая плашка выбора вариантов (поверх карточки) */
  --z-toast: 2000;             /* уведомления — всегда сверху */

  /* ── Движение ───────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── Плашки вариантов (select/status/multiselect) ──────────────────
     Конкретные фоны хранятся в БД (option_palette) и подставляются из JS:
     Palette.paint() задаёт --pill-bg / --pill-text прямо на элементе.
     Здесь — значения по умолчанию (серый), пока палитра не загружена. */
  --pill-bg: #E3E2E0;
  --pill-text: #37352F;
}

/* ── Тёмная тема (D.8) ──────────────────────────────────────────────────
   Переключается атрибутом на <html>: data-theme="dark". Переопределяются
   ТОЛЬКО цвета, тени и фон входа — шкалы (типографика, отступы, радиусы,
   размеры, z-index) общие, поэтому любой новый экран получает тему даром.
   Палитра — тёмный Notion: #191919 фон, #202020 панели, #2F2F2F ховер. */
:root[data-theme="dark"] {
  /* Текст */
  --text: #E9E9E7;
  --text-2: #A8A7A4;
  --text-3: #7C7B78;
  --text-inverse: #FFFFFF;

  /* Поверхности */
  --bg: #191919;               /* фон приложения и полей */
  --bg-panel: #202020;         /* сайдбар, шапка таблицы, сообщения чата */
  --bg-hover: #2F2F2F;         /* наведение */
  --bg-selected: #3A2018;      /* выбранный пункт (тёмная версия оранжевого) */
  --bg-code: #262626;          /* чипы, скелетоны, служебные вставки */
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-page: #191919;
  --bg-disabled: #3A3A3A;

  /* Линии */
  --border: #2F2F2F;
  --border-field: #3A3A3A;

  /* Акцент: оранжевый, в темноте чуть светлее */
  --accent: #F08050;
  --accent-hover: #F5986A;
  --accent-soft: rgba(240, 128, 80, 0.18);

  /* Бирюзовый */
  --teal: #6ECCD8;
  --teal-hover: #85D5DF;
  --teal-soft: rgba(110, 204, 216, 0.18);

  /* Семантика: светлее для контраста на тёмном фоне */
  --success: #4ECBA0;
  --danger: #F07A7A;
  --warn: #E8A54B;
  --info: #6ECCD8;

  --success-soft: rgba(78, 203, 160, 0.18);
  --danger-soft: rgba(240, 122, 122, 0.18);
  --warn-soft: rgba(232, 165, 75, 0.18);
  --info-soft: rgba(110, 204, 216, 0.18);

  --success-hover: #3FB78F;
  --danger-hover: #E46363;
  --warn-hover: #D2913A;

  /* Тени в темноте почти не видны — усиливаем непрозрачность */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-box: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 5px 15px rgba(240, 128, 80, 0.35);
  --focus-ring: 0 0 0 3px rgba(240, 128, 80, 0.35);

  /* Полосы прокрутки */
  --scrollbar-track: #202020;
  --scrollbar-thumb: #3F3F3F;
  --scrollbar-thumb-hover: #4F4F4F;

  /* Фон экрана входа (в светлой теме — фиолетовый градиент auth.css) */
  --auth-bg: linear-gradient(135deg, #1F2937 0%, #111827 100%);
}