/* Токены дизайн-системы «Kassa». Единственный источник правды по цвету, радиусам
   и типографике. Значения продублированы в C# в Admin.Client/Theme/AppTheme.cs —
   там мост в MudBlazor; менять надо в обоих местах, иначе тема поедет наполовину.

   Хроматического бренд-цвета нет: бренд — это тёплый почти-чёрный --ink. */

:root {
    --bg: #FBF9F5;
    --surface: #F3F0E8;
    --surface-2: #E9E5D9;
    --pure: #FFFFFF;
    --border: #E3DDCD;
    --border-strong: #CCC4AD;

    --ink: #1B1814;
    --ink-2: #4A4338;
    --ink-3: #8A8170;
    --ink-4: #B8B09C;

    --positive: #2D7A4F;
    --positive-soft: #E3F0E8;
    --warn: #B86D12;
    --warn-soft: #F7E5C8;
    --danger: #B73A23;
    --danger-soft: #F4DCD4;
    --info: #2F5DAB;
    --info-soft: #DDE6F6;

    --shadow-sm: 0 1px 2px rgba(27, 24, 20, .05);
    --shadow-md: 0 4px 14px rgba(27, 24, 20, .07);
    --shadow-lg: 0 24px 60px rgba(20, 17, 12, .28);

    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Радиусы: 8 — аватары и мелкие кнопки, 10 — кнопки и поля, 12 — секции,
       14 — карточки и таблицы, 18 — диалоги, 999 — бейджи и переключатели. */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    --sidebar-w: 236px;
    --topbar-h: 58px;
    --page-max: 1280px;
}

[data-theme="dark"] {
    --bg: #15120D;
    --surface: #221D16;
    --surface-2: #2C261D;
    --pure: #1D1913;
    --border: #332C22;
    --border-strong: #4A4030;

    --ink: #F4EFE4;
    --ink-2: #CBC3B2;
    --ink-3: #948B79;
    --ink-4: #6A6253;

    --positive: #5FBF86;
    --positive-soft: #18301F;
    --warn: #E0A44E;
    --warn-soft: #342817;
    --danger: #E57C64;
    --danger-soft: #36211B;
    --info: #82A8E8;
    --info-soft: #1C2738;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, .35);
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--info);
    text-decoration: none;
}

a:hover {
    color: var(--ink);
    text-decoration: underline;
}

input, button, select, textarea {
    font-family: var(--font-sans);
}

.mono {
    font-family: var(--font-mono);
}

/* Только прозрачность, без translateY. Контейнер страницы пересоздаётся и при
   гидрации, и при enhanced-навигации, поэтому анимация переигрывается чаще, чем
   один раз за переход, — и любой сдвиг по вертикали читается как «страница прыгает».
   Проявление тем же не мешает: оно не меняет геометрию. */
@keyframes fadeUp {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Пользователь мог попросить систему не анимировать — уважаем. */
@media (prefers-reduced-motion: reduce) {
    @keyframes fadeUp {
        from { opacity: 1; }
        to { opacity: 1; }
    }
}