/* =========================================================
   ТОКЕНЫ ТЕМ. Вся разметка и компоненты берут цвета, шрифты
   и радиусы только отсюда. Тема = атрибут data-theme на <html>.
   Имена токенов совпадают с будущими Variables в Figma:
   color/bg, color/surface, color/card ... font/body, radius/m.
   ========================================================= */

:root {
  /* редкость скинов CS2 — общая для всех тем (цвета Steam) */
  --rarity-milspec: #4b69ff;
  --rarity-restricted: #8847ff;
  --rarity-classified: #d32ce6;
  --rarity-covert: #eb4b4b;
  --rarity-gold: #e4ae39;

  /* сетка и размеры — общие */
  --container: 1360px;
  --gutter: 40px;
  --header-h: 72px;
  --ticker-h: 84px;

  /* шрифт как у Hellcase: Noto Sans на весь UI (400/500/600/700), Bebas Neue — заголовок баннера.
     Цифры — tabular-nums. Варианты гротеска для сравнения: ?f=inter|onest|manrope */
  --font-ui: "Noto Sans", system-ui, sans-serif;
  --font-hero: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: var(--font-ui);
  --font-display: var(--font-ui);
  --font-num: var(--font-ui);
}
[data-font="inter"]   { --font-ui: "Inter Tight", system-ui, sans-serif; }
[data-font="onest"]   { --font-ui: "Onest", system-ui, sans-serif; }
[data-font="manrope"] { --font-ui: "Manrope", system-ui, sans-serif; }

/* ---------- Тема 1 «key-drop» ---------- */
[data-theme="1"] {
  --color-bg: #0d0d0f;
  --color-surface: #17171c;        /* подложка секций, шапка */
  --color-surface-2: #1b1b22;
  --color-card: #23232d;
  --color-card-hover: #2e3244;
  --color-line: rgba(46, 50, 68, .55);
  --color-text: #ffffff;
  --color-text-2: #b6bbce;
  --color-text-3: #858dad;
  --color-accent: #ffcb77;          /* золото: кнопки, акценты */
  --color-on-accent: #0d0d0f;
  --color-accent-soft: #332918;
  --color-success: #77ff9d;
  --color-success-soft: #18331f;
  --color-price: #ffffff;
  --color-price-bg: rgba(13, 13, 15, .72);
  --color-price-line: transparent;
  --color-login: #77ff9d;
  --color-login-bg: #18331f;
  --color-login-text: #77ff9d;
  --color-hero-a: #254e86;          /* градиенты из CSS key-drop */
  --color-hero-b: #5f2a88;

  --weight-display: 700;
  --case-display: none;             /* text-transform заголовков */
  --tracking-display: 0;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-btn: 6px;
}

/* ---------- Тема 2 «farmskins» ---------- */
[data-theme="2"] {
  --color-bg: #181a21;
  --color-surface: #20222b;
  --color-surface-2: #242733;
  --color-card: #292c38;
  --color-card-hover: #323646;
  --color-line: rgba(119, 125, 140, .22);
  --color-text: #ffffff;
  --color-text-2: #a3abbf;
  --color-text-3: #777d8c;
  --color-accent: #9be86a;          /* зелёная кнопка */
  --color-on-accent: #181a21;
  --color-accent-soft: #395414;
  --color-success: #9be86a;
  --color-success-soft: #2b3d1c;
  --color-price: #fbc300;
  --color-price-bg: transparent;
  --color-price-line: transparent;
  --color-login: #9be86a;
  --color-login-bg: #9be86a;
  --color-login-text: #181a21;
  --color-hero-a: #384cac;
  --color-hero-b: #5d37aa;

  --weight-display: 700;
  --case-display: none;
  --tracking-display: -0.01em;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-btn: 999px;
}

/* ---------- Тема 3 «ggdrop» ---------- */
[data-theme="3"] {
  --color-bg: #17171f;
  --color-surface: #1b1c24;
  --color-surface-2: #22232f;
  --color-card: #21222b;
  --color-card-hover: #2a2b37;
  --color-line: rgba(179, 179, 192, .12);
  --color-text: #e2e3e7;
  --color-text-2: #b3b3c0;
  --color-text-3: #8a8a9a;
  --color-accent: #f3a45d;          /* оранжевый: кнопка, цена */
  --color-on-accent: #413327;
  --color-accent-soft: #392c22;
  --color-success: #8bebb8;
  --color-success-soft: #1d3a2c;
  --color-price: #f3a45d;
  --color-price-bg: #392c22;
  --color-price-line: transparent;
  --color-login: #f3a45d;
  --color-login-bg: #f3a45d;
  --color-login-text: #413327;
  --color-hero-a: #824ef2;          /* фиолетовый градиент */
  --color-hero-b: #ee3a65;          /* розовый градиент */

  --weight-display: 700;
  --case-display: uppercase;
  --tracking-display: 0.01em;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --radius-btn: 6px;
}

/* ---------- Розовая (разметка v3, ?t=pink): сливовый фон, пыльно-розовый акцент ----------
   Контраст: кнопка #1A1220 на #F0569B = 5.6, текст-2 на поверхности = 8.3, текст-3 = 4.6 */
[data-theme="pink"] {
  --color-bg: #1a1220;
  --color-surface: #231a2b;
  --color-surface-2: #2a2033;
  --color-card: #2e2338;
  --color-card-hover: #382b44;
  --color-line: rgba(214, 180, 230, .13);
  --color-text: #ece6f0;
  --color-text-2: #bdb2c8;
  --color-text-3: #8e8299;
  --color-accent: #f0569b;          /* пыльно-яркий розовый: кнопки, активные */
  --color-accent-2: #b18cff;        /* второй акцент: фиолетовый */
  --color-on-accent: #1a1220;
  --color-accent-soft: #3f1f37;
  --color-success: #7bd9b4;         /* мятный: онлайн, статусы */
  --color-success-soft: #1f3a33;
  --color-price: #f6b48f;           /* персиковый: цены, выигрыши */
  --color-price-bg: transparent;
  --color-price-line: transparent;
  --color-login: #f0569b;
  --color-login-bg: #f0569b;
  --color-login-text: #1a1220;
  --color-hero-a: #b18cff;
  --color-hero-b: #f0569b;

  --weight-display: 700;
  --case-display: none;
  --tracking-display: -0.01em;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-btn: 999px;
}

/* ---------- Синяя (разметка v3, ?t=blue): тёмный индиго, чистый синий акцент ----------
   Контраст: кнопка #0B1020 на #4C8DFF = 5.9, текст-2 на поверхности = 8.4, текст-3 = 4.9 */
[data-theme="blue"] {
  --color-bg: #0f1424;
  --color-surface: #161d31;
  --color-surface-2: #1b2338;
  --color-card: #1e2740;
  --color-card-hover: #26304c;
  --color-line: rgba(150, 175, 255, .14);
  --color-text: #e8ecf6;
  --color-text-2: #aeb8d0;
  --color-text-3: #7f8aa8;
  --color-accent: #4c8dff;          /* синий: кнопки, активные */
  --color-accent-2: #56c2e0;        /* второй акцент: приглушённый циан */
  --color-on-accent: #0b1020;
  --color-accent-soft: #1b2c52;
  --color-success: #79d9a8;         /* мятный: онлайн, статусы */
  --color-success-soft: #183a35;
  --color-price: #f0c274;           /* мягкий янтарь: цены, выигрыши */
  --color-price-bg: transparent;
  --color-price-line: transparent;
  --color-login: #4c8dff;
  --color-login-bg: #4c8dff;
  --color-login-text: #0b1020;
  --color-hero-a: #4c8dff;
  --color-hero-b: #56c2e0;

  --weight-display: 700;
  --case-display: none;
  --tracking-display: -0.01em;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-btn: 999px;
}