/*
 * ==========================================================================
 * DESIGN SYSTEM - CSS Variables
 * Extracted from casino reference site
 * ==========================================================================
 */

:root {
    /* ==============================
     * COLORS - Background
     * ============================== */
    --bg-darkest: #1b2330;          /* Самый тёмный фон */
    --bg-dark: #1c2532;             /* Основной фон страницы */
    --bg-card: #212b3a;             /* Фон карточек */
    --bg-card-alt: #212f47;         /* Альтернативный фон карточек */
    --bg-element: #2b2f3c;          /* Фон элементов UI */
    --bg-element-alt: #2c3b50;      /* Альтернативный фон элементов */
    --bg-button: #364458;           /* Фон кнопок/иконок */
    --bg-button-hover: #2e3c50;     /* Фон кнопок при hover */
    --bg-input: #19202c;            /* Фон полей ввода */
    --bg-code: #1f2836;             /* Фон для кода */

    /* ==============================
     * COLORS - Accent
     * ============================== */
    --accent-blue: #3d7cfd;         /* Основной синий акцент */
    --accent-blue-hover: #246bfd;   /* Синий при hover */
    --accent-blue-light: #c2e0ff;   /* Светло-синий */
    --accent-green: #00d169;        /* Зелёный - успех */
    --accent-green-alt: #03d169;    /* Альтернативный зелёный */
    --accent-green-dark: #00b75c;   /* Тёмно-зелёный */
    --accent-red: #e52b48;          /* Красный - ошибки */
    --accent-red-alt: #ff4163;      /* Альтернативный красный */
    --accent-yellow: #ffc107;       /* Жёлтый - предупреждения */
    --accent-yellow-alt: #ff9800;   /* Оранжевый */
    --accent-lime: #e3ff82;         /* Лаймовый - яркий акцент */
    --accent-purple: #363da7;       /* Фиолетовый */
    --accent-purple-dark: #293088;  /* Тёмно-фиолетовый */

    /* ==============================
     * COLORS - Text
     * ============================== */
    --text-primary: #ffffff;        /* Основной текст (заголовки) */
    --text-secondary: #8b9db6;      /* Вторичный текст */
    --text-muted: #4c5562;          /* Приглушённый текст */
    --text-muted-alt: #4d5b70;      /* Альтернативный приглушённый */
    --text-hint: #526075;           /* Подсказки */
    --text-link: #3d7cfd;           /* Ссылки */

    /* Полупрозрачный белый текст */
    --text-white-90: hsla(0, 0%, 100%, 0.9);
    --text-white-80: hsla(0, 0%, 100%, 0.8);
    --text-white-60: hsla(0, 0%, 100%, 0.6);
    --text-white-40: hsla(0, 0%, 100%, 0.4);

    /* ==============================
     * COLORS - Social Networks
     * ============================== */
    --color-vk: #1983ff;
    --color-telegram: #54a9eb;
    --color-telegram-alt: #039be5;
    --color-google: #ff4b26;
    --color-yandex: #fc3f1d;
    --color-facebook: #4267b2;
    --color-steam: #39739e;
    --color-twitch: #6441a5;
    --color-mailru: #005ff9;

    /* ==============================
     * COLORS - Borders
     * ============================== */
    --border-default: #2b2f3c;
    --border-hover: #2e3c50;
    --border-input: #334054;

    /* ==============================
     * GRADIENTS
     * ============================== */
    --gradient-card: linear-gradient(140.26deg, #192942 8.57%, #2b4164 91.76%);
    --gradient-card-alt: linear-gradient(166.31deg, rgba(42,110,198,0) -1.1%, #245290 38.2%, #212f47 94.16%);
    --gradient-card-dark: linear-gradient(180deg, #30476c, #253957);
    --gradient-promo: linear-gradient(160deg, #fff 45%, #c6d8ff);
    --gradient-vk: linear-gradient(140.26deg, #0f2443 8.57%, #1983ff 91.76%);
    --gradient-telegram: linear-gradient(140.26deg, #0f2443 8.57%, #039be5 91.76%);
    --gradient-roulette: linear-gradient(180deg, rgba(54,62,167,0), rgba(52,60,164,.09) 18.75%, rgba(50,57,162,.29) 36.46%, #2a3199);
    --gradient-fade-left: linear-gradient(90deg, #1c2532 5px, rgba(28,37,50,0));
    --gradient-fade-right: linear-gradient(270deg, #1c2532 5px, rgba(28,37,50,0));

    /* ==============================
     * BORDER RADIUS
     * ============================== */
    --radius-xs: 4px;               /* Очень маленький */
    --radius-sm: 6px;               /* Маленький */
    --radius-md: 8px;               /* Средний */
    --radius-base: 10px;            /* Базовый */
    --radius-lg: 12px;              /* Большой (карточки) */
    --radius-xl: 20px;              /* Очень большой */
    --radius-pill: 30px;            /* Таблетка */
    --radius-circle: 50%;           /* Круг */

    /* ==============================
     * BOX SHADOWS
     * ============================== */
    --shadow-card: 0 12px 18px 0 rgba(0, 0, 0, 0.1);
    --shadow-button-blue: 0 0 25px 0 rgba(36, 108, 253, 0.3);
    --shadow-focus-blue: 0 0 0 4px rgba(36, 107, 253, 0.15);
    --shadow-white: 0 2px 25px 0 hsla(0, 0%, 100%, 0.4);
    --shadow-modal: 0 20px 60px -2px rgba(27, 33, 58, 0.4);
    --shadow-dropdown: 0 6px 30px rgba(0, 0, 0, 0.1);

    /* ==============================
     * TRANSITIONS
     * ============================== */
    --transition-fast: 0.1s ease-in-out;
    --transition-base: 0.15s ease-out;
    --transition-medium: 0.3s ease-out;
    --transition-slow: 0.4s ease-out;

    /* ==============================
     * TYPOGRAPHY - Font Sizes
     * ============================== */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;

    /* ==============================
     * TYPOGRAPHY - Line Heights
     * ============================== */
    --line-height-tight: 1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ==============================
     * TYPOGRAPHY - Font Weights
     * ============================== */
    --font-weight-normal: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ==============================
     * SPACING
     * ============================== */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-base: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 50px;
    --spacing-4xl: 60px;

    /* ==============================
     * Z-INDEX
     * ============================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 10000;
}