/* ==========================================================================
   tokens.css — токены дизайн-системы «Университетская цифровая библиотека».
   Единственное место, где задаются цвета, шрифты, отступы и параметры анимации.
   Остальные файлы используют только эти переменные.

   Идея: тетрадь студента. Тёмно-бирюзовые чернила (основной цвет), клетчатая
   бумага, красное поле, жёлтый маркер. Фиолетовых оттенков в палитре нет.

   Темы:
     :root                               светлая (по умолчанию)
     @media (prefers-color-scheme: dark) тёмная, если у пользователя тема «как в системе»
     :root[data-theme="light" | "dark"]  ручной выбор (атрибут ставит js/app.js)

   ВАЖНО: тёмные значения записаны дважды (медиазапрос и атрибут) — CSS не позволяет
   поделиться блоком между ними без сборщика. Совпадение блоков проверяет тест
   apps/core/tests.py::TokensTests. Меняя тёмную тему, правьте оба блока.
   ========================================================================== */

:root {
  /* --- Шрифты: только системные, с кириллицей и таджикскими буквами --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Cambria, Georgia, "Times New Roman", serif;

  /* --- Шкала размеров текста (плавная, от 320 px) --- */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1rem;
  --text-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --text-display: clamp(1.75rem, 1.1rem + 3.4vw, 3.5rem);

  --leading-body: 1.6;
  --leading-snug: 1.35;
  --leading-tight: 1.15;

  /* --- Отступы (шаг 4 px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* --- Скругления: три разных, а не один на всё --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* --- Сетка и ширина строки --- */
  --container: 96rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --measure: 40rem;
  --grid-size: 1.25rem; /* клетка тетради */

  /* --- Движение (значения из transitions-dev) --- */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;

  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 80ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --press-dur: 100ms;
  --hover-dur: 150ms;

  --card-lift: -4px;
  --card-lift-dur: 250ms;
  --card-lift-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-bg: var(--color-surface-raised);
  --tt-fg: var(--color-text);

  /* --- Светлая тема --- */
  color-scheme: light;

  --color-bg: #eef3f3;
  --color-surface: #fafcfc;
  --color-surface-sunken: #e2eaea;
  --color-surface-raised: #ffffff;

  --color-text: #12262b;
  --color-text-muted: #46595f;
  --color-text-subtle: #5a6e74;

  --color-border: #c5d3d5;
  --color-border-input: #6f8a90;

  --color-primary: #0b6372;
  --color-primary-hover: #084f5b;
  --color-primary-active: #063d47;
  --color-on-primary: #ffffff;
  --color-primary-soft: #d6ebed;
  --color-on-primary-soft: #084f5b;

  --color-link: #0b6372;
  --color-link-hover: #063d47;
  --color-focus: #0b6372;

  --color-danger: #b3261e;
  --color-danger-soft: #fbe5e2;
  --color-success: #1e6b3f;
  --color-success-soft: #dcf0e3;
  --color-warning-soft: #ffefb8;
  --color-on-warning-soft: #5c3d00;

  --color-mark: #ffe27a; /* маркер */
  --color-on-mark: #12262b;
  --color-margin: #c8483e; /* красное поле тетради */
  --color-grid: rgba(11, 99, 114, 0.09);

  --shadow-1: 0 1px 2px rgba(18, 38, 43, 0.1), 0 0 0 1px rgba(18, 38, 43, 0.04);
  --shadow-2: 0 12px 28px -10px rgba(18, 38, 43, 0.3), 0 2px 6px rgba(18, 38, 43, 0.1);
}

/* --- Тёмная тема: «как в системе» --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0e1b1e;
    --color-surface: #142327;
    --color-surface-sunken: #0a1417;
    --color-surface-raised: #1a2d32;

    --color-text: #e7f0f0;
    --color-text-muted: #a6bbbe;
    --color-text-subtle: #8fa5a9;

    --color-border: #2b4349;
    --color-border-input: #6a8990;

    --color-primary: #5cc3d1;
    --color-primary-hover: #7dd3de;
    --color-primary-active: #9bdfe8;
    --color-on-primary: #05242a;
    --color-primary-soft: #16373d;
    --color-on-primary-soft: #a9e4eb;

    --color-link: #7fd4de;
    --color-link-hover: #a9e4eb;
    --color-focus: #7fd4de;

    --color-danger: #f2877b;
    --color-danger-soft: #3a1d1b;
    --color-success: #7bcb98;
    --color-success-soft: #173325;
    --color-warning-soft: #3d3412;
    --color-on-warning-soft: #f2d77a;

    --color-mark: #f0ce4a;
    --color-on-mark: #12262b;
    --color-margin: #e5766b;
    --color-grid: rgba(125, 211, 222, 0.07);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-2: 0 12px 28px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

/* --- Тёмная тема: ручной выбор --- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0e1b1e;
  --color-surface: #142327;
  --color-surface-sunken: #0a1417;
  --color-surface-raised: #1a2d32;

  --color-text: #e7f0f0;
  --color-text-muted: #a6bbbe;
  --color-text-subtle: #8fa5a9;

  --color-border: #2b4349;
  --color-border-input: #6a8990;

  --color-primary: #5cc3d1;
  --color-primary-hover: #7dd3de;
  --color-primary-active: #9bdfe8;
  --color-on-primary: #05242a;
  --color-primary-soft: #16373d;
  --color-on-primary-soft: #a9e4eb;

  --color-link: #7fd4de;
  --color-link-hover: #a9e4eb;
  --color-focus: #7fd4de;

  --color-danger: #f2877b;
  --color-danger-soft: #3a1d1b;
  --color-success: #7bcb98;
  --color-success-soft: #173325;
  --color-warning-soft: #3d3412;
  --color-on-warning-soft: #f2d77a;

  --color-mark: #f0ce4a;
  --color-on-mark: #12262b;
  --color-margin: #e5766b;
  --color-grid: rgba(125, 211, 222, 0.07);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 12px 28px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
}