/* ============================================================
   VisArtis — дизайн-токены. КАНОН выведен из главной
   (index.html + css/home.css + шапка v2): белое полотно,
   нейтрально-чёрный текст, светло-серая шапка, фиолетовый акцент.

   Гамма ОДНА и она холодная. Тёплая бежевая семья («тихий люкс»)
   объявлена наследием: её имена оставлены псевдонимами в конце
   файла, чтобы страницы, которые их ещё читают, автоматически
   получали канонический цвет. Новых значений тёплой семьи
   не появляется нигде.

   Светлая тема — базовая, тёмная — вторая раскладка ТЕХ ЖЕ
   токенов (не инверсия), включается html[data-theme="dark"].
   ============================================================ */

:root {
  /* --- Поверхности: ровно три уровня --- */
  --page-white: #FFFFFF;    /* полотно страницы, фон карточки, заливка полей */
  --surface-1: #F7F7F9;     /* тихая панель: подвал, полоса обещания, пустые состояния */
  --surface-2: #F2F2F4;     /* плашка: шапка, фотозона, скелетон */
  --header-bg: var(--surface-2);   /* шапка — единственный носитель этого тона */
  --photo: #F4F4F6;         /* заливка фотоплашки под изображением */

  /* --- Линии --- */
  --line: #E6E4E8;          /* волосяные линии, разделители */
  --line-strong: #D3D0D8;   /* рамки полей и тихих кнопок */

  /* --- Текст --- */
  --ink-black: #141414;     /* 16.9:1 — основной текст, заголовки, цены */
  --ink-2: #63606B;         /* 6.2:1 — подписи, метаданные, проза подвала */
  --ink-3: #76737E;         /* 4.6:1 — счётчики, плейсхолдеры, disabled */

  /* --- Акцент и его состояния --- */
  --accent: #5E4B8B;        /* покой: заливка primary, ссылки, рамки, значки */
  --accent-dark: #483A70;   /* hover / active */
  --accent-light: #8B7AB5;  /* декоративные линии, отключённый акцент */
  --accent-bg: #EFEBF7;     /* подложка бейджей и пунктов меню */
  --on-accent: #FFFFFF;     /* текст на ЛЮБОЙ заливке --accent */

  /* --- Функциональные --- */
  --ok: #3E7A4E;
  --warn: #B4433A;
  --ok-bg: #E7F1E9;
  --warn-bg: #F8E9E7;

  /* --- Типографика --- */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Ритм: 8pt-шкала --- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;  --s5: 40px;
  --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
  --gap-section: 56px;      /* вертикальный шаг между секциями */

  /* --- Колонка --- */
  --container: 1400px;
  --gutter: 40px;           /* боковое поле контейнера (≥1200px) */
  --header-h: 112px;        /* высота липкой шапки: 62 ряд + 50 категории */

  /* --- Скругления: содержание мягкое, управление острое --- */
  --r-control: 2px;         /* кнопки, поля, селекты, чипы, бейджи, вкладки */
  --r-photo: 6px;           /* фото карточки предмета */
  --r-panel: 8px;           /* пастели, коллажи, панели, плитки, модалки */
  --r-hero: 10px;           /* крупные промо-блоки, рамка CTA */
  --r-pill: 17px;           /* сердечко, числовые пилюли */
  --r-round: 50%;           /* круглое фото, монета темы, кружок «ещё» */

  /* --- Тени: у карточек, панелей и полей теней НЕТ --- */
  --shadow-lift: 0 1px 6px rgba(20, 20, 20, .14);    /* сердечко, плавающие пилюли */
  --shadow-pop: 0 12px 32px rgba(20, 20, 20, .12);   /* меню, модалки, шторки */
  --shadow-hdr: 0 6px 24px rgba(20, 20, 20, .07);    /* шапка .is-scrolled */

  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* Колонка ужимает поля вместе с окном */
@media (max-width: 1199px) { :root { --gutter: 32px; } }
@media (max-width: 1023px) { :root { --gutter: 24px; } }

/* ============================================================
   Тёмная тема — вторая раскладка тех же токенов.
   Полотно ХОЛОДНОЕ: два семейства чёрного в одном сайте
   читаются как два разных сайта.
   ============================================================ */
html[data-theme="dark"] {
  --page-white: #16151A;
  --surface-1: #1C1B20;
  --surface-2: #232228;
  --photo: #232228;

  --line: #2E2C34;
  --line-strong: #3C3A44;

  --ink-black: #ECEAF2;
  --ink-2: #A9A4B4;         /* 7.5:1 */
  --ink-3: #8B8794;         /* 5.2:1 */

  --accent: #A99CCB;
  --accent-dark: #C4BADD;   /* в тёмной теме hover светлее, не темнее */
  --accent-light: #7A6AA5;
  --accent-bg: #262233;
  --on-accent: #16151A;

  --ok: #6FAF80;
  --warn: #D96A5F;
  --ok-bg: #1E2A21;
  --warn-bg: #2E1E1C;

  --shadow-lift: 0 1px 6px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
  --shadow-hdr: 0 6px 24px rgba(0, 0, 0, .45);
}

/* ============================================================
   НАСЛЕДИЕ. Имена тёплой гаммы «тихого люкса» читают ещё
   полтора десятка файлов витрины, кабинета и админки. Пока они
   не вычищены поимённо, каждое имя ведёт на канонический токен —
   так ни одна страница не может нарисовать бежевую стену,
   графитовую кнопку или бронзовую печать.

   Правило: НОВЫЙ КОД ЭТИХ ИМЁН НЕ ИСПОЛЬЗУЕТ.
   ============================================================ */
:root, html[data-theme="dark"] {
  --wall: var(--page-white);        /* было #FAF7F2 / #16130F */
  --surface: var(--surface-1);      /* было #F3EFE8 / #201C16 */
  --card: var(--page-white);        /* было #FFFFFF / #201C16 */
  --ink: var(--ink-black);          /* было #1D1A16 / #EDE7DC */

  /* Бронзы на витрине нет ни в одном месте */
  --bronze: var(--accent);
  --bronze-dark: var(--accent-dark);
  --bronze-light: var(--accent-light);
  --bronze-bg: var(--accent-bg);

  --radius: var(--r-control);
  --shadow-card: var(--shadow-pop); /* у карточек тени нет; осталось для шторок и модалок */
}

/* В темноте «карточка» и «поверхность» чуть приподняты над полотном:
   иначе выпадающие меню и панели сливаются с фоном страницы. */
html[data-theme="dark"] {
  --card: var(--surface-1);
}