/* ============================================================
   Melek — дизайн-токены.

   Палитра «Розовое золото»: молочный крем и розовый беж логотипа.
   Тёмных плоскостей нет.

   Два цвета заданы заказчиком по логотипу:
     розово-бежевый  #D4AB9A  (ориентир PANTONE 7604 C)
     молочно-кремовый #F9F8F4 (ориентир PANTONE 6635 C)

   Первым из них НЕЛЬЗЯ писать: на молочном фоне он даёт контраст
   1.96 при нужных 4.5 — подпись читалась бы как выцветшая. Поэтому
   #D4AB9A живёт в украшениях (арки, точки цвета, тонкие линии),
   а текст и кнопки берут ту же розовую ноту потемнее: #94604E даёт
   4.89 с фоном и 5.20 с белым.

   Это не «свой» цвет вместо фирменного, а тот же тон на другой
   светлоте: разница видна рядом, но не читается как другой бренд.

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

   Ни одного чистого чёрного: самый тёмный тон — тёплый кофе #45392A.

   Тема одна. Тёмная убрана по решению заказчика: при системной
   тёмной теме фон уходил в #171512 — почти чёрный, и от светлого
   бренда не оставалось ничего.

   Это осознанный отказ, а не упущение. Цвет вещи — то, ради чего
   покупательница пришла, и он должен выглядеть одинаково днём
   и ночью. Тёмная тема меняла восприятие ткани и вместе с ним —
   ожидания от заказа.

   Плата за решение честная: ночью страница светит в глаза.
   Поэтому фон не белый, а слоновая кость, и чистого чёрного текста
   на ней нет — самый тёмный тон это кофе #45392A.
   ============================================================ */

/* Шрифты подключены <link>-ом в _Layout, а не @import отсюда:
   @import внутри CSS выстраивает запросы в цепочку — браузер сначала
   должен скачать этот файл, только потом узнаёт про шрифты. */

:root {
  /* ── Поверхности ── */
  --paper:        #F9F8F4;   /* молочный крем — фон страницы, PANTONE 6635 C */
  --surface:      #FFFFFF;   /* карточки, шапка, модалки */
  --surface-2:    #F5EDE8;   /* тихие блоки: тот же крем с розовой ноткой */
  --line:         #EDE1DA;   /* границы, разделители */
  --line-strong:  #DFC9BE;   /* границы контролов */

  /* ── Полосы: верхняя строка и подвал ──
     Раньше здесь была бронза. Тёмная плоскость наверху и внизу
     зажимала светлую страницу в рамку и съедала весь выигрыш
     от светлой палитры. */
  --band:       #F5EDE8;
  --band-ink:   #4A3A33;
  --band-ink-2: #7A665D;
  --band-line:  #E6D2C8;

  /* ── Текст ── */
  --ink:          #45392A;   /* основной: тёплый кофе, не чёрный */
  --ink-2:        #6B5A50;   /* вторичный */
  --ink-3:        #7C6A60;   /* подписи: 4.7 с бумагой, светлее не берём */

  /* ── Акцент: только действие, ведущее к покупке ──
     Розовый беж логотипа взят потемнее: сам #D4AB9A даёт 1.96
     и годится только на украшения. */
  --accent:       #94604E;
  --accent-ink:   #FFFFFF;
  --accent-soft:  #F6EAE4;   /* подсветки, фон бейджей */
  --accent-mid:   #C08B7D;   /* розовый беж: наведение, декоративные точки */
  --accent-pale:  #D4AB9A;   /* фирменный розовый беж, PANTONE 7604 C — линии и украшения */

  /* ── Крупные плоскости ── */
  --hero-1: #FFFDFC;
  --hero-2: #FBF1EC;
  --hero-3: #F2DED5;
  --hero-4: #E4C6B8;
  --hero-veil: 255, 253, 252;

  /* Текст поверх крупных плоскостей — тоже токен.
     Он был жёстко белым, и это молча запрещало светлый герой:
     на шампани белый заголовок исчезает. */
  --hero-ink:      #45392A;
  --hero-ink-2:    rgba(69, 57, 42, .8);
  --hero-dim:      #94604E;
  /* Выделенное слово в заголовке. Отдельно от --accent-pale: бледная
     роза читалась на тёмном герое и терялась на светлом. */
  --hero-em:       #A06B58;
  --hero-btn-bg:   #94604E;
  --hero-btn-ink:  #FFFFFF;
  --hero-btn-line: rgba(69, 57, 42, .3);
  --door-ink:      #45392A;
  --door-veil:     255, 252, 250;

  /* Плитки заметно глубже фона. В первой сборке светлой палитры они
     были почти в тон бумаге и читались как пустые прямоугольники —
     а это главная развилка главной страницы. */
  --door-w-1: #F7E7DF;
  --door-w-2: #E4C2B2;
  --door-w-3: #C79684;
  --door-g-1: #F3EDE6;
  --door-g-2: #DACCC0;
  --door-g-3: #B9A797;

  /* ── Единственное насыщенное пятно: кнопка покупки ──
     Название осталось прежним, смысл сменился: это больше не «тёмный»,
     а «то, что ведёт к покупке». Плоскость одна на всю страницу. */
  --deep:         #94604E;
  --deep-2:       #A06B58;
  --deep-ink:     #FFFFFF;

  /* ── Семантика (не путать с акцентом) ── */
  --sale:         #A4564A;   /* скидка, «Sale» */
  --sale-soft:    #F9E9E4;
  --ok:           #6F8154;   /* «в наличии», успех */
  --ok-soft:      #EFF2E3;
  --warn:         #8A5A2A;   /* «осталось 2 шт.»: янтарь, чтобы не сливался с акцентом */
  --warn-soft:    #F8F0E2;

  /* ── Типографика ──
     Cormorant Garamond повторяет классическую антикву самой надписи
     MELEK: высокий контраст, тонкие засечки, лёгкое начертание
     на крупном кегле. Manrope берёт всё, что читают, а не разглядывают.
     Моноширинного шрифта здесь нет намеренно: в панели управления
     он уместен, в бутике читается как техническая пометка. */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(38px, 6vw, 72px);
  --fs-h1:   clamp(30px, 4.2vw, 46px);
  --fs-h2:   clamp(22px, 2.6vw, 30px);
  --fs-h3:   17px;
  --fs-body: 15.5px;
  --fs-sm:   13.5px;
  --fs-label: 11px;

  /* Начертания. 300 — только для крупного кегля: на 15 px тонкий
     штрих по светлой бумаге выцветает. */
  --fw-body:    400;
  --fw-light:   300;
  --fw-medium:  500;
  --fw-strong:  600;

  --lh-tight: 1.05;
  --lh-head:  1.14;
  --lh-body:  1.65;

  --ls-display: -0.015em;
  --ls-label:    0.22em;   /* разрежённый верхний регистр вместо моношрифта */
  --ls-logo:     0.34em;

  /* ── Сетка и ритм ── */
  --wrap:    1440px;
  --measure: 66ch;
  --gutter:  40px;
  --gutter-mobile: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 88px;

  /* ── Форма ──
     Фотография товара — без радиуса и без рамки: любая линия вокруг
     кадра превращает витрину в таблицу. */
  --r-none:  0;
  --r-ctl:   2px;
  --r-card:  3px;
  --r-full:  999px;

  --tap-min: 44px;
  --photo-ratio: 3 / 4;

  --shadow-1: 0 1px 2px rgba(69, 57, 42, .06);
  --shadow-2: 0 1px 2px rgba(69, 57, 42, .06), 0 24px 60px -36px rgba(69, 57, 42, .3);

  /* ── Движение ── */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: light;
}

/* ============================================================
   База
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);          /* прозрачный body берёт чужой фон */
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-head); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
h3 { font-family: var(--f-body); font-weight: 600; font-size: var(--fs-h3); }

p { max-width: var(--measure); }

/* Разрежённый верхний регистр — вместо моноширинных подписей */
.label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Цены и размерные таблицы — колонки не должны «плясать» */
.price, .size-table td, .num { font-variant-numeric: tabular-nums; }

/* Фиксированная пропорция фото убирает CLS.
   height: auto обязателен: без него атрибуты width/height у <img> задают
   конкретную высоту, aspect-ratio молча игнорируется, и карточка
   растягивается на всю высоту оригинала. */
.product-photo {
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-none);
  background: var(--surface-2);
}

/* Свотч цвета: видимый кружок 22px, тач-таргет 44px за счёт padding */
.swatch {
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 11px;
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-full);
}
.swatch > i {
  display: block;
  width: 100%; height: 100%;
  border-radius: var(--r-full);
  border: 1px solid rgba(46, 37, 33, .14);
}
.swatch[aria-pressed="true"] > i {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent);
}

/* Размер — всегда кнопка, никогда select */
.size {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 14px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background   var(--dur-fast) var(--ease),
              color        var(--dur-fast) var(--ease);
}
.size:hover:not([disabled]) { border-color: var(--accent); }
.size[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.size[disabled] { opacity: .45; text-decoration: line-through; cursor: not-allowed; border-style: dashed; }

/* Доступность */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}