/* ==========================================================================
   Дизайн-токены — стиль stekspb (светлая тема по умолчанию)
   Палитра: белый фон, бордовый акцент #a12c4c, синий #3e77b7,
   тёмный сайдбар #31314f. Шрифты: Montserrat (аналог Gilroy).
   ========================================================================== */
:root {
    --font-display: 'Montserrat', 'Gilroy', system-ui, sans-serif;
    --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Courier New', monospace;

    /* Светлая тема (по умолчанию) */
    --bg: #ffffff;
    --bg-soft: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f5f7fa;
    --surface-3: #eceff4;
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.16);
    --border-strong: rgba(0, 0, 0, 0.24);

    --text: #000000;
    --text-muted: #4a4a55;
    --text-faint: #8a8a96;

    /* Основные акценты (stekspb) */
    --accent: #a12c4c;          /* бордовый */
    --accent-hover: #bc3459;
    --accent-2: #3e77b7;        /* синий */
    --accent-3: #749362;        /* зелёный (hover меню) */
    --accent-rgb: 161, 44, 76;
    --accent2-rgb: 62, 119, 183;

    /* Тёмный сайдбар и светлый текст на нём */
    --sidebar: #31314f;
    --sidebar-2: #4d4d83;
    --sidebar-text: #ceebff;

    --gradient: linear-gradient(135deg, #a12c4c 0%, #bc3459 100%);
    --gradient-soft: linear-gradient(135deg, rgba(161, 44, 76, 0.08), rgba(62, 119, 183, 0.08));

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

    --radius: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-pill: 999px;

    --header-h: 84px;
    --sidebar-w: 150px;
    --max-w: 1500px;
}

/* Тёмная тема — включается классом body.dark-mode */
body.dark-mode {
    --bg: #12131f;
    --bg-soft: #191a2a;
    --surface: #1e1f31;
    --surface-2: #262841;
    --surface-3: #30324e;
    --border: rgba(255, 255, 255, 0.09);
    --border-hover: rgba(255, 255, 255, 0.18);
    --border-strong: rgba(255, 255, 255, 0.26);

    --text: #f1f5f9;
    --text-muted: #b8c0d0;
    --text-faint: #7d8698;

    --accent: #d63f66;
    --accent-hover: #e05077;
    --accent-2: #5b93d6;
    --accent-3: #93b57e;
    --accent-rgb: 214, 63, 102;
    --accent2-rgb: 91, 147, 214;

    --sidebar: #191a2a;
    --sidebar-2: #2a2c47;
    --sidebar-text: #cbd5e1;

    --gradient: linear-gradient(135deg, #c2335c 0%, #d63f66 100%);
    --gradient-soft: linear-gradient(135deg, rgba(214, 63, 102, 0.12), rgba(91, 147, 214, 0.12));

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}