/* ============================================================
   LA2WORLD — тема кабинета под одноимённый шаблон сайта
   ------------------------------------------------------------
   Палитра и типографика повторяют публичный сайт (тема la2world):
   тёмный фиолетовый фон, сиреневый акцент, оранжевый вторичный,
   плотный гротеск и мелкие скругления вместо «пергамента».

   Структура файла:
     • TOKENS      — CSS-переменные кабинета (вся палитра).
     • COMPONENTS  — точечные правки там, где токенов не хватает.

   Тема принудительно тёмная (mode: dark в theme.json), но палитра
   продублирована и в :root — на случай, если data-theme окажется
   светлым (например, при сбросе настроек кабинета).
   ============================================================ */

/* ████ TOKENS ████ */

:root,
[data-theme="dark"] {

    /* ── Нейтральные: поверхности, границы, текст ── */
    --white: #120C20;
    --bone: #0F0A1B;
    --ivory: #171029;
    --parchment: #1D1533;
    --stone-100: #241B3D;
    --stone-200: #2E2349;
    --stone-300: #3B2E5C;
    --stone-400: #6B6288;
    --stone-500: #8B83A6;
    --stone-600: #B4AEC7;
    --stone-700: #D3CDE6;
    --stone-800: #EAE6F7;
    --stone-900: #F4F0FF;

    /* ── Фон страницы и внутренние подсветки рамок ── */
    --page-bg: #07050F;
    --has-border-inset: rgba(255, 255, 255, .045);
    --has-border-inner: rgba(255, 255, 255, .028);

    /* ── Шрифты: тот же стек, что на сайте ── */
    --font-display: "Segoe UI", Inter, Montserrat, Arial, sans-serif;
    --font-heading: "Segoe UI", Inter, Montserrat, Arial, sans-serif;
    --font-body: "Segoe UI", Inter, Montserrat, Arial, sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* ── Акцент: сиреневый сайта вместо золота ── */
    --gold: #8D61D2;
    --gold-rgb: 141 97 210;
    --gold-soft: #A984E4;
    --gold-dark: #7445BD;
    --gold-bg: rgba(141, 97, 210, .12);

    /* ── Живой статус / стриминговые платформы ── */
    --live: #19E386;
    --live-rgb: 25 227 134;
    --live-bg: rgba(25, 227, 134, .10);
    --twitch: #A06CF5;
    --twitch-bg: rgba(160, 108, 245, .10);
    --yt: #FF5D6C;
    --yt-bg: rgba(255, 93, 108, .10);

    /* ── Статусные цвета ── */
    --red: #FF5D6C;
    --red-rgb: 255 93 108;
    --red-bg: rgba(255, 93, 108, .10);
    --blue: #5AA9FF;
    --blue-rgb: 90 169 255;
    --blue-bg: rgba(90, 169, 255, .10);
    --patch: #19E386;
    --patch-rgb: 25 227 134;
    --patch-bg: rgba(25, 227, 134, .10);
    --error: #FF5D6C;
    --danger: #FF5D6C;
    --danger-hover: #FF3B4D;
    --danger-bg: rgba(255, 93, 108, .12);
    --danger-text: #FF8A95;
    --success: #19E386;
    --success-rgb: 25 227 134;
    --success-bright: #4DFFAB;
    --success-bg: rgba(25, 227, 134, .10);
    --warning: #F0A33B;
    --warning-text: #F0A33B;

    /* ── Цвета уведомлений ── */
    --notif-green: #19E386;
    --notif-blue: #5AA9FF;
    --notif-yellow: #F0A33B;
    --notif-red: #FF5D6C;
    --notif-purple: #A984E4;
    --notif-teal: #35E0D0;

    /* ── Редкость предметов: синий → сиреневый → оранжевый ── */
    --rare: #5AA9FF;
    --rare-bg: rgba(90, 169, 255, .10);
    --rare-glow: rgba(90, 169, 255, .45);
    --epic: #A06CF5;
    --epic-bg: rgba(160, 108, 245, .10);
    --epic-glow: rgba(160, 108, 245, .50);
    --legend: #F0A33B;
    --legend-bg: rgba(240, 163, 59, .14);
    --legend-glow: rgba(240, 163, 59, .55);

    /* ── Заточка ── */
    --enchant-low: #19E386;
    --enchant-mid: var(--rare);
    --enchant-high: var(--epic);
    --enchant-top: var(--legend);
    --enchant-max: #FF5D6C;

    /* ── Тени: без «пергаментных» колец, мягкая глубина ── */
    --shadow-dropdown:
        0 0 0 1px var(--stone-200),
        0 18px 48px rgba(0, 0, 0, .55);
    --shadow-modal:
        0 0 0 1px var(--stone-200),
        0 28px 80px rgba(0, 0, 0, .6);

    /* ── Скругления: мелкие, как в вёрстке сайта ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 14px;
    --radius-full: 999px;
}

/* ████ COMPONENTS ████

   ВАЖНО про :root перед селекторами.
   В ядре кабинета много правил вида  [data-theme=dark] .c-card  — их
   специфичность (0,2,0) выше «голого» класса, и тема их не перебила бы.
   Префикс :root даёт ровно такую же специфичность, а так как файл темы
   подключается после ядра, побеждает тема — и в тёмном, и в светлом режиме.
   ──────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   ОСНОВА — фон страницы повторяет градиент сайта
   ═══════════════════════════════════════════════════════════ */
:root body {
    background:
        radial-gradient(1200px 620px at 78% -12%, rgba(141, 97, 210, .16), transparent 62%),
        radial-gradient(900px 520px at 8% 4%, rgba(240, 163, 59, .07), transparent 58%),
        linear-gradient(180deg, #06040D 0%, var(--page-bg) 42%, #090514 100%);
    background-attachment: fixed;
    letter-spacing: .01em;
}

/* Контентная колонка — тот же баннер, что на первом экране сайта:
   картинка вверху, уходящая в фон страницы. */
:root .l-main {
    background:
        linear-gradient(90deg, rgba(7, 5, 15, .84) 0%, rgba(7, 5, 15, .26) 44%, rgba(7, 5, 15, .44) 72%, rgba(7, 5, 15, .76) 100%),
        linear-gradient(180deg, rgba(7, 5, 15, .04) 0%, rgba(7, 5, 15, .40) 38%, rgba(7, 5, 15, .86) 66%, var(--page-bg) 88%),
        url("../images/banner.png") center top / 100% auto no-repeat;
}

/* ═══════════════════════════════════════════════════════════
   КАРКАС — плоские рамки вместо тройного «паспарту»
   ═══════════════════════════════════════════════════════════ */
:root .has-border {
    border-color: rgba(255, 255, 255, .07);
    box-shadow:
        inset 0 1px 0 var(--has-border-inset),
        0 2px 14px rgba(0, 0, 0, .35);
}

:root .has-border-shadow {
    box-shadow:
        inset 0 1px 0 var(--has-border-inset),
        0 0 0 1px rgba(255, 255, 255, .07),
        0 10px 26px rgba(0, 0, 0, .4);
}

:root .c-panel {
    background: linear-gradient(180deg, rgba(18, 13, 29, .86) 0%, rgba(15, 10, 27, .88) 100%);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 var(--has-border-inset),
        0 0 0 1px rgba(255, 255, 255, .055),
        0 14px 38px rgba(0, 0, 0, .42);
    backdrop-filter: blur(10px);
}

:root .c-navbar {
    background:
        linear-gradient(90deg, rgba(141, 97, 210, .14), rgba(255, 255, 255, .03) 42%, rgba(240, 163, 59, .09)),
        linear-gradient(180deg, rgba(18, 13, 29, .86), rgba(15, 10, 27, .86));
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 var(--has-border-inset),
        0 0 0 1px rgba(255, 255, 255, .06),
        0 12px 30px rgba(0, 0, 0, .38);
    backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════════════════
   ТИПОГРАФИКА — плотные прописные заголовки как на сайте
   ═══════════════════════════════════════════════════════════ */
:root .c-page-title__text h1 {
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: uppercase;
}

:root .c-page-title__text p {
    color: var(--stone-500);
}

:root .c-panel__title {
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8125rem;
}

:root .c-navbar__brand,
:root .c-sidebar__logo,
:root .c-mobile-bar__logo {
    letter-spacing: .12em;
    font-weight: 900;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   КНОПКИ — тёмное стекло, основная кнопка сиреневая как на сайте
   ═══════════════════════════════════════════════════════════ */
:root .g-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
    color: var(--stone-700);
    border-radius: var(--radius-sm);
    letter-spacing: .06em;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 0 1px rgba(255, 255, 255, .08);
}

:root .g-btn:hover {
    color: var(--stone-900);
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 1px rgba(255, 255, 255, .16);
}

:root .g-btn--primary {
    background: linear-gradient(180deg, #A96BEE 0%, #8755CE 52%, #7445BD 100%);
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 0 0 1px rgba(169, 107, 238, .5),
        0 12px 28px rgba(135, 85, 206, .34);
}

:root .g-btn--primary:hover {
    background: linear-gradient(180deg, #B87DF5 0%, #9260DA 52%, #7E4EC9 100%);
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 0 0 1px rgba(169, 107, 238, .65),
        0 14px 34px rgba(135, 85, 206, .44);
}

:root .g-btn--danger {
    background: linear-gradient(180deg, #FF7482 0%, #E2495A 100%);
    color: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 0 0 1px rgba(255, 93, 108, .5),
        0 12px 28px rgba(226, 73, 90, .3);
}

/* ═══════════════════════════════════════════════════════════
   САЙДБАР — активный пункт с сиреневой полосой
   ═══════════════════════════════════════════════════════════ */
:root .c-sidebar {
    background: linear-gradient(180deg, #0B0716 0%, #07050F 100%);
    border-right: 1px solid rgba(255, 255, 255, .055);
}

:root .c-sidebar__link {
    border-radius: var(--radius-sm);
    letter-spacing: .02em;
}

:root .c-sidebar__link:hover {
    background: rgba(255, 255, 255, .06);
}

:root .c-sidebar__link.is-active {
    color: #FFFFFF;
    background: linear-gradient(90deg, rgba(141, 97, 210, .26), rgba(141, 97, 210, .06));
    box-shadow: inset 2px 0 0 var(--gold);
}

/* Аватар пользователя в ядре захардкожен золотым градиентом */
:root .c-user__avatar {
    background: linear-gradient(135deg, #7445BD 0%, #A984E4 100%);
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   КАРТОЧКИ И ТАБЛИЦЫ — тонкая рамка + подсветка при наведении
   ═══════════════════════════════════════════════════════════ */
:root .c-card,
:root .c-news-card,
:root .c-file-card,
:root .c-streamer {
    border-radius: var(--radius-md);
}

:root .c-news-card:hover,
:root .c-file-card:hover,
:root .c-streamer:hover {
    border-color: rgba(141, 97, 210, .4);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

:root .c-table tbody tr:hover {
    background: rgba(141, 97, 210, .07);
}

/* ═══════════════════════════════════════════════════════════
   ФОРМЫ — тёмные поля, сиреневый фокус
   ═══════════════════════════════════════════════════════════ */
:root .c-field__input,
:root .c-cr-field__input,
:root .g-input,
:root .c-select__trigger,
:root textarea {
    border-radius: var(--radius-sm);
}

:root .c-field__input:focus,
:root .c-cr-field__input:focus,
:root .g-input:focus,
:root textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(141, 97, 210, .18);
}

/* ═══════════════════════════════════════════════════════════
   ССЫЛКИ И ВЫДЕЛЕНИЕ
   ═══════════════════════════════════════════════════════════ */
:root a:hover {
    text-decoration-color: var(--gold);
}

::selection {
    background: rgba(141, 97, 210, .4);
    color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════
   СКРОЛЛБАР
   ═══════════════════════════════════════════════════════════ */
* {
    scrollbar-color: var(--stone-300) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--stone-300);
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
    background-clip: content-box;
}