/* ============================================================
   TaskNote — Design Tokens (Wave 1)
   ============================================================
   Это базовый слой дизайн-системы: spacing / radius / duration /
   easing / shadow. Подключается ПЕРЕД style.css в app.html и
   наследуется в :root, поэтому доступен из любого компонента.

   Правила использования:
   1. Любые отступы (padding / margin / gap) — через var(--space-N).
      Шкала кратна 4: 4/8/12/16/24/32/48/64.
   2. Любые скругления (border-radius) — через var(--r-*).
   3. Длительности анимаций (transition / animation-duration) —
      через var(--t-*).
   4. Кривые анимаций — через var(--ease-*).
   5. Тени блоков (box-shadow) — через var(--shadow-*).

   Что НЕ менять токенами в этой волне:
   - font-size, line-height (типографика — отдельная шкала)
   - border-width (1/2px — обычно остаются литералами)
   - top / left / right / bottom для абсолютного позиционирования
     (часто завязаны на конкретный layout)

   Темы [data-theme="..."] не трогают эти токены — они переопределяют
   только цветовые переменные (--accent, --text и т.п.) в style.css.
   ============================================================ */

:root {
    /* ─── SPACING SCALE (4-base) ───
       --space-1: 4px   — hairline-отступы внутри иконок, мини-чипов
       --space-2: 8px   — стандартный gap между мелкими элементами
       --space-3: 12px  — padding кнопок, карточек среднего размера
       --space-4: 16px  — padding контейнеров, gap в формах
       --space-5: 24px  — внутренний padding модалок, секций
       --space-6: 32px  — внешние отступы между крупными блоками
       --space-7: 48px  — большие вертикальные отступы (hero, header)
       --space-8: 64px  — максимальные отступы для разделения секций */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ─── RADIUS SCALE ───
       --r-xs:   4px    — мелкие чипы, инпуты компактные
       --r-sm:   6px    — кнопки, теги, badges
       --r-md:   12px   — карточки задач, модалки (default)
       --r-lg:   18px   — крупные карточки, hero-блоки
       --r-xl:   24px   — большие панели, виджеты
       --r-full: 9999px — pill-кнопки, аватары, switch */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* ─── DURATION ───
       Шкала анимаций. Чем дольше — тем более «весомым» воспринимается
       элемент. Кнопки и hover-стейты — fast/base. Модалки — slow.
       --t-instant: 80ms   — мгновенный отклик (active, ripple)
       --t-fast:    120ms  — hover, focus, button press
       --t-base:    180ms  — стандарт для transition большинства UI
       --t-slow:    280ms  — appearance модалок, drawer, toast
       --t-slower:  420ms  — крупные перестроения, page-level */
    --t-instant: 80ms;
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --t-slower: 420ms;

    /* ─── EASING ───
       --ease-out:    стандартный «затухающий» easing для входа
       --ease-in-out: симметричный easing для перемещений
       --ease-spring: легкий overshoot для «живых» элементов */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.4, 1.4, 0.5, 1);

    /* ─── ELEVATION (shadow scale) ───
       --shadow-xs: hairline под чипами, тонкая отбивка
       --shadow-sm: дефолтная тень карточек в спокойном состоянии
       --shadow-md: hover-стейт карточек, плавающие элементы
       --shadow-lg: модалки, поповеры, dropdown
       --shadow-xl: главные диалоги, верхний слой (over everything)
       --shadow-warm: тёплая тень для «бумажного» стиля (business)
       --shadow-inset-highlight: внутренний highlight по верхней
            кромке — добавляет ощущение glossy/material на кнопках */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px -2px rgba(15,23,42,0.08), 0 2px 4px -1px rgba(15,23,42,0.04);
    --shadow-lg: 0 12px 24px -4px rgba(15,23,42,0.12), 0 4px 8px -2px rgba(15,23,42,0.06);
    --shadow-xl: 0 24px 48px -8px rgba(15,23,42,0.18), 0 8px 16px -4px rgba(15,23,42,0.08);
    --shadow-warm: 2px 1px 3px rgba(120,80,40,0.12), 3px 14px 32px -8px rgba(60,40,20,0.18);
    --shadow-inset-highlight: inset 0 1px 0 rgba(255,255,255,0.5);

    /* ─── FOCUS RING (a11y) ───
       Универсальное кольцо фокуса. Использует текущий --accent темы,
       поэтому автоматически адаптируется под выбранную цветовую тему.
       Применяется на :focus-visible для интерактивных элементов. */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}