/*
 * RoVerse — дизайн-токены.
 *
 * Единственное место, где живут HEX, размеры, радиусы, тени и тайминги.
 * Источник истины по оформлению — 1rob.png и визуальное ТЗ (разделы 3–6, 71–76, 81–84, 103).
 * По другим файлам HEX не размазывать: только var(--…).
 *
 * Тема сейчас одна — светлая. Тёмная (ТЗ §160) добавляется переопределением
 * этого же набора переменных в блоке [data-theme="dark"], без правки компонентов.
 */

:root {
    /* ---------- Поверхности ---------- */
    --bg-page: #F7F9FF;
    --bg-card: #FFFFFF;
    --bg-soft: #F3F6FF;
    --bg-cold: #EEF4FF;
    --bg-violet: #F5F2FF;
    --bg-backdrop: rgba(23, 27, 44, .45);

    /* ---------- Акценты ---------- */
    --primary: #5B5CF6;
    --primary-hover: #4A4BEA;
    --primary-2: #7357F6;
    --accent-blue: #3678F6;
    --purple: #885AF8;
    --primary-soft: #EEEDFE;
    --primary-soft-2: #E4E2FD;
    --gradient: linear-gradient(135deg, #4878FF 0%, #7357F6 55%, #A45CF6 100%);
    --gradient-soft: linear-gradient(135deg, #EEF4FF 0%, #F1EEFE 55%, #F7EFFE 100%);

    /* ---------- Текст ---------- */
    --text-primary: #171B2C;
    --text-secondary: #626B80;
    --text-muted: #929AAD;
    --text-invert: #FFFFFF;

    /* ---------- Границы ---------- */
    --border: #E6EAF3;
    --border-card: #E8ECF5;
    --border-strong: #D7DEEC;

    /* ---------- Статусы ---------- */
    --success: #25B76B;
    --success-soft: #E6F7EE;
    --success-text: #17864C;

    --warning: #F3A522;
    --warning-soft: #FDF2DF;
    --warning-text: #A9700D;

    --danger: #E94E5D;
    --danger-soft: #FDECEE;
    --danger-text: #C2303F;

    --info: #3678F6;
    --info-soft: #E7F0FE;
    --info-text: #2358BE;

    --neutral-soft: #EFF2F8;
    --neutral-text: #626B80;

    /* ---------- Фокус ---------- */
    --focus-ring: 0 0 0 3px rgba(91, 92, 246, .30);

    /* ---------- Шкала отступов (шаг 4px) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 80px;

    /* ---------- Радиусы (ТЗ §5) ---------- */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-card: 16px;
    --radius-lg: 18px;
    --radius-panel: 22px;
    --radius-hero: 28px;
    --radius-pill: 999px;

    /* ---------- Тени ---------- */
    --shadow-xs: 0 1px 2px rgba(35, 50, 100, .06);
    --shadow-card: 0 6px 24px rgba(35, 50, 100, .06);
    --shadow-card-hover: 0 12px 32px rgba(35, 50, 100, .10);
    --shadow-pop: 0 14px 40px rgba(35, 50, 100, .14);
    --shadow-dialog: 0 28px 70px rgba(20, 30, 70, .22);
    --shadow-primary: 0 8px 22px rgba(91, 92, 246, .28);

    /* ---------- Типографика (ТЗ §6) ---------- */
    --font-base: "Manrope", "Inter", "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

    --fs-h1: clamp(28px, 3.6vw, 48px);
    --fs-h2: clamp(22px, 2.4vw, 32px);
    --fs-h3: clamp(19px, 1.6vw, 22px);
    --fs-h4: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-xs: 13px;
    --fs-micro: 12px;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.2;
    --lh-heading: 1.25;
    --lh-body: 1.55;
    --ls-heading: -0.02em;

    /* ---------- Сетка и каркас (ТЗ §81–83) ---------- */
    --container: 1440px;
    --content: 1320px;
    --container-pad: 24px;
    --columns: 12;
    --gap: 24px;
    --gap-card: 20px;
    --header-height: 72px;
    --tabbar-height: 64px;
    --section-gap: 72px;

    /* ---------- Управляющие элементы ---------- */
    --control-height: 44px;
    --control-height-sm: 36px;
    --control-height-lg: 52px;

    /* ---------- Движение (ТЗ §70, §91) ---------- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 260ms;

    /* ---------- Слои ---------- */
    --z-header: 100;
    --z-dropdown: 200;
    --z-tooltip: 300;
    --z-dialog: 400;
    --z-toast: 500;
}

/*
 * Брейкпойнты (в @media нельзя подставить переменную, поэтому список — здесь,
 * а в файлах используются те же значения):
 * 1440 desktop · 1200 узкий desktop · 1024 laptop/tablet landscape · 768 tablet · 560 · 430/390/375 phone.
 */

@media (max-width: 1024px) {
    :root {
        --section-gap: 56px;
        --gap: 20px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-pad: 16px;
        --gap: 16px;
        --gap-card: 16px;
        --header-height: 64px;
        --section-gap: 40px;
    }
}