/* ══════════════════════════════════════════
   VARIABLES — Все CSS переменные
   ══════════════════════════════════════════ */

:root {
    /* ====== ЦВЕТА ТЁМНОЙ ТЕМЫ (по умолчанию) ====== */
    --bg-root: #0b0d10; /* CS2 dark dashboard background */
    --bg-body: #101317; /* CS2 dark body background */
    --bg-surface-1: #151a21; /* Rich dark steel grey */
    --bg-surface-2: #1c212a; /* Slightly lighter steel grey */
    --bg-surface-3: #222934; /* Card background/borders */
    --bg-surface-raised: #2a323f;
    --bg-surface-overlay: rgba(11, 13, 16, 0.95);
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-active: rgba(255, 255, 255, 0.08);
    --bg-selected: rgba(222, 155, 53, 0.1); /* Gold/orange selected bg */

    /* Границы */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-focus: #de9b35; /* CS2 Accent orange/gold */

    /* Текст */
    --text-primary: #f0f3f6;
    --text-secondary: #9098a6;
    --text-tertiary: #626a76;
    --text-disabled: #444b55;
    --text-inverse: #0d0f12;
    --text-link: #de9b35;
    --text-link-hover: #ffb13b;

    /* Акцентные цвета */
    --accent: #de9b35; /* Gold/Orange */
    --accent-hover: #eb9a14;
    --accent-pressed: #c78625;
    --accent-subtle: rgba(222, 155, 53, 0.08);
    --accent-glow: rgba(222, 155, 53, 0.04); /* Faint, non-neon */

    /* Дисциплины */
    --cs2: #de9b35;
    --cs2-subtle: rgba(222, 155, 53, 0.08);
    --cs2-glow: rgba(222, 155, 53, 0.04);

    /* Семантические */
    --success: #22c55e;
    --success-subtle: rgba(34, 197, 94, 0.12);
    --warning: #eab308;
    --warning-subtle: rgba(234, 179, 8, 0.12);
    --danger: #ef4444;
    --danger-subtle: rgba(239, 68, 68, 0.12);
    --info: #3b82f6;
    --info-subtle: rgba(59, 130, 246, 0.12);

    /* CS2 стороны */
    --ct-color: #5d9bef;
    --ct-bg: rgba(93, 155, 239, 0.12);
    --t-color: #e8c44a;
    --t-bg: rgba(232, 196, 74, 0.12);

    /* ELO Tiers / FUT Grades */
    --gold-grade: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --gold-glow: rgba(251, 191, 36, 0.2);
    --silver-grade: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    --silver-glow: rgba(226, 232, 240, 0.15);
    --bronze-grade: linear-gradient(135deg, #b4855c 0%, #7c5332 100%);
    --bronze-glow: rgba(180, 133, 92, 0.15);

    /* Glassmorphism Blur */
    --backdrop-blur: blur(12px);


    /* Live */
    --live-color: #ef4444;
    --live-glow: rgba(239, 68, 68, 0.4);

    /* Win/Loss */
    --win-color: #22c55e;
    --loss-color: #ef4444;
    --draw-color: #eab308;

    /* ====== РАЗМЕРЫ ====== */
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --header-height: 64px;
    --content-max-width: 1400px;
    --card-padding: 20px;
    --page-padding: 28px;

    /* ====== СКРУГЛЕНИЯ ====== */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ====== ТЕНИ ====== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 36px rgba(0, 0, 0, 0.6), 0 8px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow-accent: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-glow-success: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow-danger: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-glow-live: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);

    /* ====== ПЕРЕХОДЫ ====== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 350ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;

    --transition-colors: color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
    --transition-transform: transform var(--duration-normal) var(--ease-out);
    --transition-all: all var(--duration-normal) var(--ease-out);

    /* ====== ТИПОГРАФИКА ====== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ====== Z-INDEX ====== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-search: 800;
}