/* ==========================================================================
   Стаффбаза — токены, темы, сброс и типографика
   ========================================================================== */

:root {
    color-scheme: light;

    /* Поверхности */
    --bg: #f4f6fb;
    --bg-accent: radial-gradient(1200px 600px at 85% -10%, #e4e8ff 0%, transparent 60%),
                 radial-gradient(900px 500px at 5% 0%, #f3e8ff 0%, transparent 55%);
    --surface: #ffffff;
    --surface-2: #f2f4fa;
    --surface-3: #e9edf6;
    --surface-glass: rgba(255, 255, 255, 0.72);

    /* Текст */
    --text: #0e1526;
    --text-muted: #5a6478;
    --text-faint: #8b94a8;
    --text-on-accent: #ffffff;

    /* Границы и тени */
    --border: #e2e7f1;
    --border-strong: #ccd4e4;
    --ring: rgba(79, 70, 229, 0.35);

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.05);
    --shadow-xl: 0 24px 64px rgba(16, 24, 40, 0.18);

    /* Акценты */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-soft: #eef0ff;
    --primary-soft-text: #3730a3;
    --accent: #7c3aed;
    --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
    --gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(168, 85, 247, 0.12));

    --success: #059669;
    --success-soft: #e7f7f1;
    --success-soft-text: #065f46;
    --warn: #d97706;
    --warn-soft: #fdf3e3;
    --warn-soft-text: #92400e;
    --danger: #dc2626;
    --danger-soft: #fdeaea;
    --danger-soft-text: #991b1b;
    --info: #0284c7;
    --info-soft: #e6f4fb;
    --info-soft-text: #075985;
    --money: #047857;

    /* Геометрия */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-full: 999px;

    /* Движение */
    --ease: cubic-bezier(0.22, 0.8, 0.28, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast: 140ms;
    --t: 220ms;
    --t-slow: 380ms;

    /* Размеры каркаса */
    --header-h: 60px;
    --tabbar-h: 66px;
    --sidebar-w: 252px;
    --content-max: 1120px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-num: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Тёмная тема: системная (если пользователь не выбрал светлую вручную) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #080b13;
        --bg-accent: radial-gradient(1200px 600px at 85% -10%, rgba(79, 70, 229, 0.18) 0%, transparent 60%),
                     radial-gradient(900px 500px at 5% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 55%);
        --surface: #111827;
        --surface-2: #171f30;
        --surface-3: #1f293c;
        --surface-glass: rgba(17, 24, 39, 0.76);

        --text: #e9edf7;
        --text-muted: #9ba6bd;
        --text-faint: #6d7891;

        --border: #253048;
        --border-strong: #33405c;
        --ring: rgba(129, 140, 248, 0.45);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
        --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.65);

        --primary: #6366f1;
        --primary-hover: #818cf8;
        --primary-soft: rgba(99, 102, 241, 0.16);
        --primary-soft-text: #c7d2fe;
        --accent: #a78bfa;
        --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c084fc 100%);
        --gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.18));

        --success: #10b981;
        --success-soft: rgba(16, 185, 129, 0.15);
        --success-soft-text: #6ee7b7;
        --warn: #f59e0b;
        --warn-soft: rgba(245, 158, 11, 0.15);
        --warn-soft-text: #fcd34d;
        --danger: #ef4444;
        --danger-soft: rgba(239, 68, 68, 0.15);
        --danger-soft-text: #fca5a5;
        --info: #38bdf8;
        --info-soft: rgba(56, 189, 248, 0.15);
        --info-soft-text: #7dd3fc;
        --money: #34d399;
    }
}

/* Тёмная тема, выбранная вручную — должна перебивать системную светлую */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #080b13;
    --bg-accent: radial-gradient(1200px 600px at 85% -10%, rgba(79, 70, 229, 0.18) 0%, transparent 60%),
                 radial-gradient(900px 500px at 5% 0%, rgba(124, 58, 237, 0.14) 0%, transparent 55%);
    --surface: #111827;
    --surface-2: #171f30;
    --surface-3: #1f293c;
    --surface-glass: rgba(17, 24, 39, 0.76);

    --text: #e9edf7;
    --text-muted: #9ba6bd;
    --text-faint: #6d7891;

    --border: #253048;
    --border-strong: #33405c;
    --ring: rgba(129, 140, 248, 0.45);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.65);

    --primary: #6366f1;
    --primary-hover: #818cf8;
    --primary-soft: rgba(99, 102, 241, 0.16);
    --primary-soft-text: #c7d2fe;
    --accent: #a78bfa;
    --gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c084fc 100%);
    --gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.18));

    --success: #10b981;
    --success-soft: rgba(16, 185, 129, 0.15);
    --success-soft-text: #6ee7b7;
    --warn: #f59e0b;
    --warn-soft: rgba(245, 158, 11, 0.15);
    --warn-soft-text: #fcd34d;
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --danger-soft-text: #fca5a5;
    --info: #38bdf8;
    --info-soft: rgba(56, 189, 248, 0.15);
    --info-soft-text: #7dd3fc;
    --money: #34d399;
}

/* --- Сброс ---------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Атрибут hidden обязан выигрывать: у счётчиков и бейджей задан
   display: grid/inline-flex, который иначе перебивает display: none. */
[hidden] {
    display: none !important;
}

body {
    min-height: 100dvh;
    background: var(--bg);
    background-image: var(--bg-accent);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

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

a:hover {
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

h1, h2, h3, h4 {
    font-weight: 650;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.22rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: 0.92rem; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--primary);
    color: #fff;
}

/* Скроллбар — тонкий, в цвет темы */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid transparent;
    border-radius: var(--r-full);
    background-clip: content-box;
}

/* --- Утилиты -------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.money { color: var(--money); font-weight: 650; font-variant-numeric: tabular-nums; }
.nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.825rem; }
.text-md { font-size: 0.925rem; }
.text-lg { font-size: 1.05rem; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }

.hide-mobile { display: none; }

@media (min-width: 720px) {
    .hide-mobile { display: revert; }
    .only-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}