/* ==========================================================================
   Токены проекта. Магазин одежды, чёрно-белая тема.
   Все блоки берут значения отсюда. Хардкод hex в разметке запрещён.

   Решение по цвету. Цветного акцента нет. Роль акцента выполняет свет
   за вещью (--glow-*). Это единственный «яркий» элемент на странице,
   поэтому он и притягивает взгляд к товару, а не к декору.
   ========================================================================== */

/* --- Шрифты. Локальные, вариативные, латиница плюс кириллица -------------- */

@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-cyrillic.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  src: url('../assets/fonts/oswald-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('../assets/fonts/onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Martian Mono';
  src: url('../assets/fonts/martian-mono-cyrillic.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('../assets/fonts/martian-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Цвет. Семантические роли ------------------------------------------ */

  --bg:          #070707;  /* фон страницы */
  --bg-deep:     #000000;  /* сцена товара, там где живёт свет */
  --surface:     #0e0e0e;  /* подвал карточки, панели */
  --surface-2:   #161616;  /* поднятый слой, выпадающие списки */

  --ink:         #f5f5f4;  /* основной текст. Контраст к --bg 18.5:1 */
  --ink-2:       #a8a8a5;  /* второстепенный текст. 8.4:1 */
  --muted:       #8a8a86;  /* подписи мелким кеглем. 5.8:1, проходит AA */

  --line:        #5f5f5d;  /* границы и разделители, несущие смысл. 3.1:1 */
  --line-soft:   rgba(245, 245, 244, 0.10); /* только декоративные волоски */

  --danger:      #ff6f61;
  --success:     #7ee0a6;
  --focus:       #ffffff;

  /* Свет за вещью. Это и есть наш акцент.
     Используется как radial-gradient, значения подобраны так,
     чтобы силуэт вещи читался, а фон не «серел». */
  --glow-core:   rgba(255, 255, 255, 0.30);
  --glow-mid:    rgba(255, 255, 255, 0.09);
  --glow-edge:   rgba(255, 255, 255, 0);

  /* --- Типографика -------------------------------------------------------- */

  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-text:    'Onest', system-ui, -apple-system, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.75rem;
  --text-5xl:  clamp(3.5rem, 9vw, 8rem);

  /* 1.18, а не 1.05 «как красиво на латинице». У кириллицы есть Й и Ё,
     их краткая и точки выходят выше прописных. При плотном интерлиньяже
     они упираются в край строки и выглядят срезанными. Проверено глазами
     на Oswald, шаг подобран по букве Й в слове ПЕРВЫЙ. */
  --leading-tight:  1.18;
  --leading-snug:   1.25;
  --leading-normal: 1.55;

  /* Разрядка. Плюсовая для служебных подписей капсом,
     на длинных русских словах в основном тексте минусовая запрещена. */
  --tracking-label: 0.14em;
  --tracking-wide:  0.28em;

  /* --- Spacing. База 4px --------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container: 84rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 4.5rem;

  /* --- Радиус. Один словарь на весь сайт.
         Решение сознательное. Магазин технический, формы почти прямые. --- */

  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-pill: 999px; /* только настоящие кнопки, не ярлыки */

  /* --- Тень. На чёрном тени не работают, разделение делают тон и линия ---- */

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.75);

  /* --- Motion ------------------------------------------------------------- */

  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Z-шкала. Магические значения запрещены ----------------------------- */

  --z-base:     0;
  --z-sticky:   100;
  --z-header:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-intro:    500;
}

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