:root {
  /* --- Бренд: глубокие тёмные тона + золото (см. testoviy_sait.html) --- */
  --bg-page: #0B0A0E;
  --card-bg: #14131A;
  --gold: #D4AF37;
  /* Каналы RGB для полупрозрачных оттенков: rgba(var(--gold-rgb), 0.2) — их переопределяют темы ниже. */
  --gold-rgb: 212, 175, 55;
  --bg-rgb: 11, 10, 14;
  --card-rgb: 20, 19, 26;
  --gold-soft: rgba(var(--gold-rgb), 0.14);
  --gold-line: rgba(var(--gold-rgb), 0.22);
  --gold-line-strong: rgba(var(--gold-rgb), 0.35);
  --accent-hi: #E6C65F;                     /* светлый край градиента акцентных кнопок */
  --accent-lo: #B8932A;                     /* тёмный край */
  --accent-2: #F3D98A;                      /* второй акцент темы: звёзды, искры, ореол */
  --accent-star: #F3D98A;
  /* Заливка основных кнопок (CTA): по умолчанию — градиент акцента. Матовые темы задают сплошной цвет. */
  --btn-primary-bg: linear-gradient(135deg, var(--accent-hi) 0%, var(--gold) 55%, var(--accent-lo) 100%);
  --btn-primary-pressed: var(--btn-primary-bg); /* золотые темы: нажатие — только сжатие кнопки */
  --surface-raised: #16131D;
  /* Непрозрачная подложка липких шапок (вкладки гардероба): цвет карточки текущей темы. */
  --surface-card: var(--card-bg);
  --text-white: #F5F5F7;
  --text-muted: rgba(245, 245, 247, 0.65);

  /* Sprint 12: крупнее аватарка с рамкой и ореолом (~14%) — в шапке профиля и в превью гардероба. Ореолы —
     SVG одного масштаба с фото (viewBox 380×220 на фото 120px), поэтому множитель общий: кольца, венки и
     нимбы по-прежнему точно обнимают фото и не обрезаются. */
  --avatar-upscale: 1.14;
  --profile-avatar-size: calc(120px * var(--avatar-upscale));   /* было 120px -> ~137px */
  --wardrobe-avatar-size: calc(36px * var(--avatar-upscale));   /* было 36px -> ~41px */

  /* Кнопки панели действий */
  --btn-pass-from: #3A1016;        /* винно-гранатовый */
  --btn-pass-to: #22080B;
  --btn-superlike-from: #3B1E54;   /* глубокий аметистовый */
  --btn-superlike-to: #200E31;
  --btn-like-from: #0F4C81;        /* глубокий тёмно-синий */
  --btn-like-to: #062846;

  /* Чипсы-стелы */
  --slate-bg: rgba(20, 20, 28, 0.75);
  --chip-accent-bg: rgba(198, 93, 123, 0.35);
  --chip-accent-border: #C65D7B;

  /* --- Совместимость со старыми именами переменных ---------------------
     Все экраны (мастер, квиз, профиль, фильтры) написаны на этих токенах;
     переназначаем их на новую палитру, а не переписываем каждый экран. */
  --color-ink: var(--text-white);           /* основной текст */
  --color-ink-soft: #A9A6B4;                /* второстепенный текст */
  --color-paper: var(--bg-page);            /* фон страницы */
  --color-surface: var(--card-bg);          /* карточки, инпуты */
  --color-sand: var(--gold-line);           /* границы, разделители */
  --color-rose: var(--gold);                /* основной акцент — CTA, прогресс */
  --color-rose-soft: var(--gold-soft);      /* фон выбранных состояний */
  --color-sage: var(--gold);                /* выбранные теги, "нравится" */
  --color-sage-soft: var(--gold-soft);
  --color-brick: #E5707F;                   /* ошибки (светлее — читается на тёмном) */
  --color-on-accent: #0B0A0E;               /* текст на золотых кнопках */

  --color-like: var(--btn-like-from);
  --color-superlike: #B58CFF;               /* светлый аметист — для текста/штампов */

  /* --- Типографика --- */
  /* Cinzel — только латиница; кириллица автоматически берётся из
     Cormorant Garamond (он тоже подключён в index.html). */
  --font-display: "Cinzel", "Cormorant Garamond", "PT Serif", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-name: "Lora", "Georgia", serif; /* имя и возраст на карточке, цитата «О себе» */

  --fs-display: 1.75rem;
  --fs-title: 1.25rem;
  --fs-body: 0.95rem;
  --fs-small: 0.8rem;

  /* --- Отступы --- */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;

  /* Safe area (нотч и системные панели внутри Telegram WebView) */
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); /* Android WebView отдаёт 0 в env() — берём переменную Telegram */
}

/* Приложение всегда тёмное: светлая/тёмная тема Telegram на палитру
   НЕ влияет (раньше здесь был блок :root[data-tg-theme="dark"]). */


/* ===================================================================================
   Темы приложения (Профиль → «Редактировать анкету» → «Гардероб» → «Темы и цвета»).
   Атрибут data-theme на <html> ставит js/themes.js по Profile.profile_theme. Темы
   переназначают только токены: экраны, кнопки, нижнее меню и ореолы написаны на них.
   Ключи и уровни открытия — apps/profiles/customization.py, js/customization.js.
   =================================================================================== */

:root[data-theme="obsidian_gold"] {
  --bg-page: #0B0A0E;
  --gold: #D4AF37;
  --text-white: #F4EFE3;
  --text-muted: rgba(244, 239, 227, 0.66);
}

:root[data-theme="pastel_kitty"] {
  --bg-page: #130D14;
  --card-bg: #1E1420;
  --gold: #FF70A6;
  --gold-rgb: 255, 112, 166;
  --bg-rgb: 19, 13, 20;
  --card-rgb: 30, 20, 32;
  --accent-hi: #FF9CC2;
  --accent-lo: #FF5D8F;
  --accent-2: #FF5D8F;
  --accent-star: #FFD1E3;
  --surface-raised: #241827;
  --text-white: #FFF0F5;
  --text-muted: rgba(255, 240, 245, 0.68);
  --color-ink-soft: #D9B8C6;
  --color-on-accent: #2A0F1C;
  --chip-accent-bg: rgba(255, 93, 143, 0.3);
  --chip-accent-border: #FF5D8F;
}

:root[data-theme="midnight_dark"] {
  /* OLED-убежище: нейтральный уголь, без цветового шума. Кнопки — матовый мел с тёмным текстом. */
  --bg-page: #090A0D;
  --card-bg: #13161D;
  --gold: #E2E8F0;
  --gold-rgb: 226, 232, 240;
  --bg-rgb: 9, 10, 13;
  --card-rgb: 19, 22, 29;
  --gold-soft: rgba(255, 255, 255, 0.06);
  --gold-line: rgba(255, 255, 255, 0.08);
  --gold-line-strong: rgba(255, 255, 255, 0.14);
  --accent-hi: #E2E8F0;
  --accent-lo: #CBD5E1;
  --accent-2: #94A3B8;
  --accent-star: #CBD5E1;
  --btn-primary-bg: #E2E8F0;
  --btn-primary-pressed: #CBD5E1;
  --surface-raised: #181C24;
  --text-white: #F8FAFC;
  --text-muted: #94A3B8;
  --color-ink-soft: #94A3B8;
  --color-on-accent: #0A0C10;
  --chip-accent-bg: rgba(148, 163, 184, 0.16);
  --chip-accent-border: #64748B;
}

:root[data-theme="velvet_lavender"] {
  /* Приглушённая ночная слива: бархатный фон и дымчатая лаванда. */
  --bg-page: #110E18;
  --card-bg: #1A1528;
  --gold: #A58AC9;
  --gold-rgb: 165, 138, 201;
  --bg-rgb: 17, 14, 24;
  --card-rgb: 26, 21, 40;
  --gold-soft: rgba(165, 138, 201, 0.12);
  --gold-line: rgba(165, 138, 201, 0.22);
  --gold-line-strong: rgba(165, 138, 201, 0.34);
  --accent-hi: #B39DDB;
  --accent-lo: #9479BC;
  --accent-2: #8E7CC3;
  --accent-star: #D1C4E9;
  --btn-primary-bg: #A58AC9;
  --btn-primary-pressed: #9479BC;
  --surface-raised: #1F1930;
  --text-white: #EDE7F6;
  --text-muted: #B39DDB;
  --color-ink-soft: #B39DDB;
  --color-on-accent: #140E20;
  --chip-accent-bg: rgba(142, 124, 195, 0.24);
  --chip-accent-border: #8E7CC3;
}

:root[data-theme="terminal_glitch"] {
  /* Сдержанный киберпанк: ночной кобальт, матовая сталь-циан, моноширинные заголовки — без радиоактивного неона. */
  --bg-page: #0A0E17;
  --card-bg: #111827;
  --gold: #38BDF8;
  --gold-rgb: 56, 189, 248;
  --bg-rgb: 10, 14, 23;
  --card-rgb: 17, 24, 39;
  --gold-soft: rgba(56, 189, 248, 0.1);
  --gold-line: rgba(56, 189, 248, 0.2);
  --gold-line-strong: rgba(56, 189, 248, 0.32);
  --accent-hi: #0EA5E9;
  --accent-lo: #0284C7;
  --accent-2: #7DD3FC;
  --accent-star: #BAE6FD;
  --btn-primary-bg: #0284C7;
  --btn-primary-pressed: #0369A1;
  --surface-raised: #152033;
  --text-white: #E2E8F0;
  --text-muted: rgba(226, 232, 240, 0.64);
  --color-ink-soft: #8BA3C0;
  --color-on-accent: #08101E;
  --chip-accent-bg: rgba(56, 189, 248, 0.14);
  --chip-accent-border: #0284C7;
  --font-display: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

:root[data-theme="overgrown_angel"] {
  /* Тёмная академия: мокрый графит, мраморная скульптура и патина плюща. */
  --bg-page: #101214;
  --card-bg: #171A1E;
  --gold: #DCE1DE;
  --gold-rgb: 220, 225, 222;
  --bg-rgb: 16, 18, 20;
  --card-rgb: 23, 26, 30;
  --gold-soft: rgba(138, 171, 143, 0.12);
  --gold-line: rgba(138, 171, 143, 0.22);
  --gold-line-strong: rgba(138, 171, 143, 0.34);
  --accent-hi: #E6EAE7;
  --accent-lo: #C8D0CA;
  --accent-2: #708A77;
  --accent-star: #F0F2F0;
  --btn-primary-bg: #DCE1DE;
  --btn-primary-pressed: #C8D0CA;
  --surface-raised: #1C2025;
  --text-white: #ECEFED;
  --text-muted: rgba(236, 239, 237, 0.64);
  --color-ink-soft: #A3ADA6;
  --color-on-accent: #121517;
  --chip-accent-bg: rgba(112, 138, 119, 0.24);
  --chip-accent-border: #708A77;
}

:root[data-theme="forest_ivy"] {
  /* Ночной хвойный лес и травяной пергамент: мох на кнопках, оливковый лист и медовая роса в акцентах. */
  --bg-page: #0B120E;
  --card-bg: #131E18;
  --gold: #A3B18A;
  --gold-rgb: 163, 177, 138;
  --bg-rgb: 11, 18, 14;
  --card-rgb: 19, 30, 24;
  --gold-soft: rgba(116, 155, 128, 0.12);
  --gold-line: rgba(116, 155, 128, 0.2);
  --gold-line-strong: rgba(116, 155, 128, 0.32);
  --accent-hi: #B5C29E;
  --accent-lo: #8C9A73;
  --accent-2: #A3B18A;      /* оливковый лист: листва, вязь */
  --accent-star: #DDA15E;   /* медовая роса: искры, звёзды */
  --btn-primary-bg: linear-gradient(135deg, #588157 0%, #4A6F49 100%);
  --btn-primary-pressed: #4A6F49;
  --surface-raised: #17251D;
  --text-white: #EEF2EC;
  --text-muted: rgba(238, 242, 236, 0.66);
  --color-ink-soft: #A9B8AC;
  --color-on-accent: #F4F7F4;
  --chip-accent-bg: rgba(88, 129, 87, 0.3);
  --chip-accent-border: #588157;
}

:root[data-theme="vinland_fields"] {
  /* Поля Винланда: северное лето, пшеница на солнце и тёплая земля. */
  --bg-page: #14110A;
  --card-bg: #1D1910;
  --gold: #E5A93C;
  --gold-rgb: 229, 169, 60;
  --bg-rgb: 20, 17, 10;
  --card-rgb: 29, 25, 16;
  --gold-soft: rgba(229, 169, 60, 0.1);
  --gold-line: rgba(229, 169, 60, 0.2);
  --gold-line-strong: rgba(229, 169, 60, 0.32);
  --accent-hi: #E8B45A;
  --accent-lo: #BF8228;
  --accent-2: #C9A66B;      /* солома и земля: колосья, линии */
  --accent-star: #F6D58A;   /* низкое солнце */
  --btn-primary-bg: #D4973B;
  --btn-primary-pressed: #BF8228;
  --surface-raised: #231E13;
  --text-white: #FAF0DE;
  --text-muted: #D4AF37;
  --color-ink-soft: #D4AF37;
  --color-on-accent: #1A1205;
  --chip-accent-bg: rgba(212, 151, 59, 0.22);
  --chip-accent-border: #D4973B;
}

:root[data-theme="pixel_twilight"] {
  /* Сумерки на качелях: индиговые сумерки и коралловый закат, пиксельные звёзды. */
  --bg-page: #110D1B;
  --card-bg: #191428;
  --gold: #F38375;
  --gold-rgb: 243, 131, 117;
  --bg-rgb: 17, 13, 27;
  --card-rgb: 25, 20, 40;
  --gold-soft: rgba(243, 131, 117, 0.12);
  --gold-line: rgba(243, 131, 117, 0.22);
  --gold-line-strong: rgba(243, 131, 117, 0.34);
  --accent-hi: #F38375;
  --accent-lo: #D45A5E;
  --accent-2: #8E7DDB;      /* индиго сумерек */
  --accent-star: #FFD7A8;   /* тёплые звёзды */
  --btn-primary-bg: #E56B6F;
  --btn-primary-pressed: #D45A5E;
  --surface-raised: #1F1931;
  --text-white: #F7EEFA;
  --text-muted: #CD6A85;
  --color-ink-soft: #CD6A85;
  --color-on-accent: #12091C;
  --chip-accent-bg: rgba(229, 107, 111, 0.22);
  --chip-accent-border: #E56B6F;
}

:root[data-theme="summer_hill"] {
  /* Зелёный холм: летний склон, чистое небо и строгая архитектура. */
  --bg-page: #0C140F;
  --card-bg: #14221A;
  --gold: #52B788;
  --gold-rgb: 82, 183, 136;
  --bg-rgb: 12, 20, 15;
  --card-rgb: 20, 34, 26;
  --gold-soft: rgba(82, 183, 136, 0.1);
  --gold-line: rgba(82, 183, 136, 0.2);
  --gold-line-strong: rgba(82, 183, 136, 0.32);
  --accent-hi: #52B788;
  --accent-lo: #357A5B;
  --accent-2: #64B5F6;      /* небесная лазурь */
  --accent-star: #CFE8FF;
  --btn-primary-bg: #40916C;
  --btn-primary-pressed: #357A5B;
  --surface-raised: #182A20;
  --text-white: #EDF7F1;
  --text-muted: #74C69D;
  --color-ink-soft: #74C69D;
  --color-on-accent: #F7FBF4;
  --chip-accent-bg: rgba(100, 181, 246, 0.16);
  --chip-accent-border: #64B5F6;
}

:root[data-theme="voxel_craft"] {
  /* Ретро-воксели: бедрок, камень, трава, алмаз и золотой самородок. Палитра своя, без чужих текстур и логотипов. */
  --bg-page: #121516;
  --card-bg: #1C2224;
  --gold: #4E9F3D;
  --gold-rgb: 78, 159, 61;
  --bg-rgb: 18, 21, 22;
  --card-rgb: 28, 34, 36;
  --accent-hi: #6FC25A;
  --accent-lo: #3A7D2C;
  --accent-2: #6FB7B7;  /* матовый «алмаз» вместо кислотного циана */
  --accent-star: #E6C36A;
  --surface-raised: #232B2E;
  --text-white: #EEF2EC;
  --text-muted: rgba(238, 242, 236, 0.68);
  --color-ink-soft: #A9B5AE;
  --color-on-accent: #0D1A0B;
  --chip-accent-bg: rgba(111, 183, 183, 0.18);
  --chip-accent-border: #6FB7B7;
  /* Блоки, а не пилюли: скругления почти нулевые, тень «пиксельная» — без размытия. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 4px;
  --voxel-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
}

/* Плавная смена темы без мигания макета: только цвета. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme] body {
    transition: background-color 0.25s ease, color 0.25s ease;
  }
}