/* ============================================================================
   AleksFurs — слой токенов. Направление «Нуар».

   Сильный дизайн держится на трёх вещах: чёрное поле, крупный заголовок
   прописными и один цвет — красный. Фотографии магазина сняты на белом фоне,
   и на чёрном они встают яркими панелями, как в лукбуке галереи.

   Правила слоя:
   1. Здесь только переменные. Ни одного селектора с оформлением.
   2. Отступы — строго по сетке 4px, из восьми ступеней.
   3. У каждого размера шрифта своя высота строки.
   4. Цвета названы ролями. У красного две роли: заливка (кнопка, метка —
      на ней белая надпись) и чернила (красный текст на тёмном). Один оттенок
      не может делать и то и другое: белый на #C8102E даёт 5,88:1, а сам этот
      красный на чёрном — только 3,36:1.
   5. Слои z-index — только из шкалы.
   6. При обращении к токену указывается запасное значение.
   ========================================================================= */

:root {
  /* ── Сетка отступов ──────────────────────────────────────────────────────*/
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Типографика ─────────────────────────────────────────────────────────
     Заголовки — узкий гротеск прописными: он и даёт силу. Основной текст —
     спокойный Inter. Курсивная антиква — только для редких акцентов в заголовке. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --text-xs:   12px;  --leading-xs:   1.4;
  --text-sm:   14px;  --leading-sm:   1.45;
  --text-base: 16px;  --leading-base: 1.55;
  --text-lg:   20px;  --leading-lg:   1.3;
  --text-xl:   24px;  --leading-xl:   1.15;
  --text-2xl:  32px;  --leading-2xl:  1.05;
  --text-3xl:  40px;  --leading-3xl:  1;

  /* Витринные размеры — единственное осознанное исключение из шкалы:
     заголовок первого экрана должен держать ширину страницы. */
  --text-display-sm: clamp(40px, 6vw, 84px);
  --text-display:    clamp(52px, 10.4vw, 172px);
  /* Межстрочный интервал прописного Oswald считается от кириллицы.
     Хвост «У», «Д», «Ц», «Щ» уходит на 0,166 em ниже строки, круглые
     прописные поднимаются на 0,821 em, а кратка «Й» и точки «Ё» — на
     1,03–1,04 em. При 0,9 хвост «У» врезался в «О» строки ниже.

     --leading-display 1,05 — плотно, для витринных заголовков, текст которых
       лежит в коде (первый экран, разделы главной): зазор с круглой буквой
       0,06 em, а сочетания «хвост над Й» в этих текстах проверены на всех
       ширинах (tests/responsive-check.js).
     --leading-heading 1,25 — для заголовков из данных: названия товаров,
       страниц, категорий. Хвост над «Ё» даёт там зазор 0,04 em — буквы не
       сталкиваются при любом тексте. */
  --leading-display: 1.05;
  --leading-heading: 1.25;

  /* Разрядка прописных: без неё узкий гротеск слипается в полосу. */
  --tracking-caps: .12em;
  --tracking-display: .005em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Палитра «Нуар» — основная для всех ──────────────────────────────────*/
  --color-bg:             #0A0A0B;
  --color-bg-muted:       #111113;
  --color-surface:        #151517;
  --color-surface-muted:  #1C1C1F;
  --color-border:         #2A2A2E;
  --color-border-strong:  #77777E;   /* граница поля: 4,10 на поверхности */

  --color-text:           #F4F1EC;
  --color-text-muted:     #BDB8B0;
  --color-text-subtle:    #99938B;   /* 6,50 на фоне */
  --color-inverse:        #0A0A0B;   /* текст на светлых вставках */

  --color-accent:         #C8102E;   /* заливка: кнопка, метка, активный пункт */
  --color-accent-hover:   #A50C25;
  --color-accent-ink:     #FF5A6B;   /* красный текст и обводка на тёмном: 6,53 */
  --color-accent-soft:    #2A0E13;
  --color-on-accent:      #FFFFFF;   /* 5,88 на заливке */

  --color-gold:           #D4B27A;
  --color-gold-soft:      #221B11;
  --color-on-gold:        #111111;

  --color-success:        #5CC98C;
  --color-success-soft:   #0F2419;
  --color-on-success:     #0A1A11;

  --color-warning:        #E7B45A;
  --color-warning-soft:   #2A2011;
  --color-on-warning:     #1E1507;

  --color-danger:         #FF6B6B;
  --color-danger-soft:    #2C1214;
  --color-on-danger:      #1F0A0A;

  --color-neutral:        #F4F1EC;   /* метка «Продана»: светлая плашка */
  --color-on-neutral:     #0A0A0B;

  --color-scrim:          rgba(0, 0, 0, .72);
  --color-scrim-strong:   rgba(0, 0, 0, .96);

  /* Поверх фотографии. Снимки сделаны на белом фоне в любой теме сайта,
     поэтому метки на них не переключаются вместе с темой. */
  --photo-bg:    #FFFFFF;
  --photo-ink:   #0A0A0B;
  --photo-paper: #F4F1EC;

  /* ── Радиусы ─────────────────────────────────────────────────────────────
     Прямые углы. Скругление читается как мягкость, а нам нужна обратная
     интонация. Круг остаётся только у иконочных кнопок. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-full: 999px;

  /* ── Тени ────────────────────────────────────────────────────────────────
     На чёрном мягкая тень не видна. Глубину дают граница и тёмная подложка. */
  --shadow-sm: 0 0 0 1px var(--color-border, #2A2A2E);
  --shadow-md: 0 0 0 1px var(--color-border-strong, #77777E);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .7);

  /* ── Переходы ────────────────────────────────────────────────────────────*/
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 500ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Слои ────────────────────────────────────────────────────────────────*/
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-overlay:  1200;
  --z-modal:    1300;
  --z-toast:    1400;
  --z-skip:     1500;

  /* ── Размеры ─────────────────────────────────────────────────────────────*/
  --wrap: 1360px;
  --header-h: 72px;
  --tap-min: 44px;

  /* Брейкпойнты (справка — в @media переменные не работают):
       sm 480px · md 768px · lg 1024px · xl 1280px */
}

/* ── Вариант «Слоновая кость» ───────────────────────────────────────────────
   Та же сила — прописные, прямые углы, красный — но на светлом поле.
   Включается явно: ?theme=light или атрибутом. Системная светлая тема
   его не включает: чёрный — лицо бренда, а не настройка устройства. */
:root[data-theme="light"] {
  --color-bg:             #F3EFE9;
  --color-bg-muted:       #E9E3DA;
  --color-surface:        #FFFFFF;
  --color-surface-muted:  #F8F5F0;
  --color-border:         #DCD5CA;
  --color-border-strong:  #827B72;

  --color-text:           #0A0A0B;
  --color-text-muted:     #3A3733;
  --color-text-subtle:    #645E57;
  --color-inverse:        #F4F1EC;

  --color-accent:         #C8102E;
  --color-accent-hover:   #A50C25;
  --color-accent-ink:     #B00E28;
  --color-accent-soft:    #F8E4E7;
  --color-on-accent:      #FFFFFF;

  --color-gold:           #7A5A22;
  --color-gold-soft:      #F3EAD9;
  --color-on-gold:        #FFFFFF;

  --color-success:        #1F6B45;
  --color-success-soft:   #E6F2EB;
  --color-on-success:     #FFFFFF;

  --color-warning:        #845A12;
  --color-warning-soft:   #FAF0DE;
  --color-on-warning:     #FFFFFF;

  --color-danger:         #A32C2C;
  --color-danger-soft:    #FBE9E9;
  --color-on-danger:      #FFFFFF;

  --color-neutral:        #0A0A0B;
  --color-on-neutral:     #F4F1EC;

  --color-scrim:          rgba(10, 10, 11, .55);
  --color-scrim-strong:   rgba(10, 10, 11, .94);

  --shadow-lg: 0 24px 64px rgba(10, 10, 11, .18);
}

/* Явный выбор «Нуара» — значения совпадают с основными, блок нужен,
   чтобы атрибут побеждал возможный светлый вариант выше по дереву. */
:root[data-theme="dark"] {
  --color-bg: #0A0A0B;
}

/* ── Совместимость со старыми именами ───────────────────────────────────────
   Прежние обращения продолжают работать. `--accent` в старом коде стоял
   в роли текста — поэтому он смотрит на чернила, а не на заливку. */
:root {
  --bg:          var(--color-bg, #0A0A0B);
  --bg-soft:     var(--color-bg-muted, #111113);
  --surface:     var(--color-surface, #151517);
  --surface-2:   var(--color-surface-muted, #1C1C1F);
  --line:        var(--color-border, #2A2A2E);
  --line-strong: var(--color-border-strong, #77777E);

  --ink:     var(--color-text, #F4F1EC);
  --ink-2:   var(--color-text-muted, #BDB8B0);
  --ink-3:   var(--color-text-subtle, #99938B);
  --ink-inv: var(--color-inverse, #0A0A0B);

  --accent:      var(--color-accent-ink, #FF5A6B);
  --accent-dark: var(--color-accent-hover, #A50C25);
  --accent-soft: var(--color-accent-soft, #2A0E13);
  --gold:        var(--color-gold, #D4B27A);
  --gold-soft:   var(--color-gold-soft, #221B11);
  --ok:          var(--color-success, #5CC98C);
  --ok-soft:     var(--color-success-soft, #0F2419);
  --warn:        var(--color-warning, #E7B45A);
  --warn-soft:   var(--color-warning-soft, #2A2011);
  --err:         var(--color-danger, #FF6B6B);
  --err-soft:    var(--color-danger-soft, #2C1214);

  --font:         var(--font-sans, Arial, sans-serif);

  --r-sm: var(--radius-sm, 0);
  --r:    var(--radius-md, 0);
  --r-lg: var(--radius-lg, 0);
  --r-xl: var(--radius-xl, 0);

  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --shadow-3: var(--shadow-lg);
}