/* ════════════════════════════════════════════════════════════════════
   КОПИЯ src/Flow.Client/wwwroot/css/tokens.css.

   Flow.Auth и Flow.Client — отдельные сервисы и друг на друга не ссылаются, поэтому токены
   продублированы файлом. Правило простое: правим в клиенте — копируем сюда целиком, без разбора
   «что нужно этим двум страницам». Так расхождение видно диффом, а не глазами.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* ── fonts ── */
    --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ── weights ── */
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

    /* ── type scale ── */
    --text-h3: 22px;
    --text-body: 15px;
    --text-sm: 14px;

    --lh-normal: 1.33;

    --tracking-tight: -0.4px;
    --tracking-display: -0.02em;
    --tracking-wide: 0.08em;

    /* ── spacing (base 5px) ──
       Шкала держится целиком, включая шаги, которых сейчас нет в разметке: пропуск в ряду
       5/10/15/20/25/30/40/50 читается как ошибка и провоцирует магические числа в CSS. */
    --space-1: 5px;
    --space-2: 10px;
    --space-3: 15px;
    --space-4: 20px;
    --space-5: 25px;
    --space-6: 30px;
    --space-8: 40px;
    --space-10: 50px;

    /* ── radii ── */
    --radius-pill: 999px;
    --radius-sm: 5px;

    /* Flow-специфичные радиусы карточек/панелей из макета */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;

    /* ── control sizes ── */
    --control-h-sm: 34px;
    --control-h-md: 40px;   /* Flow: компактный md для topbar (hint-size из макета) */
    --control-h: 50px;

    /* ── Flow · палитра ── */
    --bg-deep: #082019;
    --bg-content: #153E32;
    --surface: #1B4A3B;
    --surface-raised: #245A48;
    --surface-raised-hover: #2C6A56;

    --accent: #FFBA00;
    --accent-hover: #FFCB40;
    --accent-soft: rgba(255, 186, 0, 0.14);
    --on-accent: #0C3B2E;

    /* Бренд: знак Flow (Components/BrandMark.razor, комплект — wwwroot/brand/).
       Единственный синий в проекте и единственное место, где он допустим: палитра
       интерфейса остаётся зелёно-янтарной. Тёмная доля знака (#15181B) живёт прямо
       в SVG — в CSS она не нужна, знак нигде не перекрашивается. */
    --brand-blue: #2451D6;

    --sage: #6D9773;
    --tan: #BB8A52;
    --danger: #E2604F;
    --danger-soft: rgba(226, 96, 79, 0.14);

    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.68);
    --text-tertiary: rgba(255, 255, 255, 0.42);
    /* Подписи полей карточки задачи: светлый шалфей — отличим от белых значений и ярче tertiary. */
    --text-label: #A9CBB0;
    --text-disabled: rgba(255, 255, 255, 0.3);
    --text-on-accent: var(--on-accent);

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --border-subtle: rgba(255, 255, 255, 0.06);

    /* ── elevation ── */
    --shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.35);
    --shadow-popover: 0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    --shadow-drawer: -30px 0 60px rgba(0, 0, 0, 0.4);
    --shadow-sidebar: 2px 0 12px rgba(0, 0, 0, 0.25);

    /* ── motion ── */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    /* Пружина с лёгким перелётом — для «живых» появлений (варианты свёрнутого сегмента). */
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}