/* ============================================================
   ТЕМА / ПЕРЕМЕННЫЕ
   Меняете цвета, шрифты и пути к картинкам — только здесь.
   Все остальные файлы (layout.css, style.css) ссылаются на эти
   переменные и трогать их для смены темы не нужно.
   ============================================================ */

:root {
    /* --- Картинки (кладите файлы в /assets, см. assets/README.md) --- */
    --img-bg: url('../../../assets/bg-castle.png');
    --img-logo: url('../assets/logo-icon.webp');
    --img-card-back: url('../assets/card-back.webp');
    --img-card-spy: url('../assets/spy.webp');
    --img-kick-icon: url('../../../assets/kick-icon.png');
    /* Процедурные текстуры (сгенерированы под тон референса) — лёгкое
       зерно и облачная тонировка, чтобы панели не выглядели плоской
       заливкой, а как тёмный резной камень. */
    --img-grain: url('../../../assets/texture-grain.png');
    --img-mottle: url('../../../assets/texture-mottle.png');

    /* --- Фон страницы --- */
    --bg-dark: #0a0505;
    --bg-fallback-gradient: radial-gradient(ellipse at 20% 10%, #2a0a0a 0%, #0a0505 55%, #050303 100%);

    /* --- Панели ---
       Тёмный резной камень, а не цветная заливка: почти чёрный
       нейтральный градиент + процедурные текстуры (--img-mottle,
       --img-grain) поверх. Цвет достаётся тексту и тонкой светящейся
       окантовке, не самой панели — так выглядит референс. */
    --panel-bg: linear-gradient(160deg, rgba(17, 15, 16, 0.95) 0%, rgba(6, 5, 6, 0.97) 100%);
    --panel-bg-solid: #0c0a0b;
    --border-color: #2b2620;
    --panel-edge: #120a0a;

    /* --- Акценты --- */
    --accent-gold: #d3ad5f;
    --gold-dark: #7a5a28;
    --gold-glow: rgba(211, 173, 95, 0.4);

    --accent-red: #c0392b;
    --accent-red-bright: #e8503f;
    --red-glow: rgba(200, 60, 40, 0.45);
    --light-red-glow: rgba(255, 130, 110, 0.6);

    --accent-green: #2f8f4e;
    --green-glow: rgba(63, 185, 80, 0.45);

    /* --- Кнопки (как на референсе: тёмные, а не золотые заливки,
       цвет только тонкой рамкой + белый/светлый текст) --- */
    --btn-slate-1: #1a212a;
    --btn-slate-2: #0a0d12;
    --btn-slate-border: #3b4652;
    --btn-slate-border-top: #55636f;
    --btn-slate-border-hover: #667482;

    --btn-red-1: #4d1517;
    --btn-red-2: #22070a;
    --btn-red-border: #5a1b1e;
    --btn-red-border-top: #702428;
    --btn-red-border-hover: #7f2a2e;

    --btn-text: #edf1f4;

    /* Обводка панелей/карточек/модалок — та же серая, что и у кнопок
       (никакого золота в рамках, золото остаётся только как акцент
       для hover/фокуса/выделения). */
    --panel-border: var(--btn-slate-border);
    --panel-border-light: var(--btn-slate-border-top);

    /* --- Текст --- */
    --text-main: #f2e9d8;
    --text-muted: #9c8b7a;

    /* --- Карты --- */
    --card-width: 122px;
    --card-height: 174px;

    /* --- Цвета атрибутов героев (условности Dota, не менять без причины) --- */
    --attr-str: #ec3d23;
    --attr-agi: #26e030;
    --attr-int: #00ffff;
    --attr-all: linear-gradient(135deg, #ec3d23, #26e030, #00d9eb);

    /* --- Цвета для режима "Предметы" (по типу предмета) --- */
    --item-finished: var(--accent-gold);
    --item-component: #8ea3b8;
    --item-neutral: #2fb6a3;

    /* --- Шрифты --- */
    --font-main: var(--font-body);
    --font-title: var(--font-project);
}