/* ============================================================
   VIDRO — design tokens
   Джерело: 01-design-prompt.md, розділ 2. Значення знято з нинішнього
   сайту; помічені ЗМІНЕНО свідомо відрізняються від оригіналу.
   Підключати першим, до будь-яких стилів секцій теми.
   ============================================================ */

:root {
  /* ---- Колір ---- */
  --color-ink:        #202020;  /* заголовки */
  --color-body:       #171717;  /* основний текст */
  --color-muted:      #6B6B6B;  /* другорядний текст, хлібні крихти (5.7:1 на білому) */
  --color-line:       #E5E5E5;  /* розділювачі, рамки полів */
  --color-bg:         #FFFFFF;  /* фон сторінки — завжди білий */
  --color-surface:    #F6F6F6;  /* фон карток, плейсхолдери фото */
  --color-btn:        #2A2A2A;
  --color-btn-hover:  #000000;
  --color-btn-disabled: #C4C4C4;
  --color-on-btn:     #FFFFFF;

  /* Другий склад display-заголовка. Був #EDEDED — контраст 1,17:1, тобто
     склад «ЧИК» у «ПРЯМО ТОПЧИК» людина зі слабким зором просто не бачила
     й читала слово обрубаним. Це не претензія Lighthouse, це втрата тексту.
     #8E8E8E дає 3,3:1 — мінімум для великого тексту за WCAG AA, при цьому
     склад лишається помітно світлішим за основний. Повернути «привид»
     майже невидимим можна одним значенням тут. */
  --color-ghost:      #8E8E8E;

  --color-badge-new:  #F44EE6;
  --color-badge-best: #D4AF37;
  --color-badge-sale: #E03131;  /* ДОДАНО */
  --color-on-badge:   #FFFFFF;

  --color-success:    #1F9254;
  --color-warning:    #B45309;
  --color-error:      #C92A2A;

  --color-star-on:    #202020;
  --color-star-off:   #D9D9D9;
  --color-scrim:      rgba(23, 23, 23, 0.40);

  /* ---- Типографіка ---- */
  --font-display: 'PPRightGrotesk', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'NAMU1990', 'Jost', system-ui, sans-serif;

  --display-lh: 0.88;
  --display-weight: 500;

  /* mobile-first: значення нижче — для sm */
  --fs-hero:        44px;
  --fs-h1-cat:      34px;
  --fs-section:     34px;
  --fs-h1-product:  26px;  /* ЗМІНЕНО з 55px */

  --fs-price-pdp:   24px;
  --fs-price-card:  17px;  /* ЗМІНЕНО з 20px */
  --fs-name-card:   15px;  /* ЗМІНЕНО з 16px */
  --fs-doc-head:    22px;  /* підзаголовок у довгому документі */
  --fs-body:        16px;
  --fs-meta:        14px;  /* мінімум для тексту на мобільному */
  --fs-small:       13px;
  --fs-btn:         17px;
  --fs-badge:       10px;

  --lh-body:  1.55;  /* ЗМІНЕНО з 1.2 */
  --lh-tight: 1.2;
  --lh-meta:  1.4;
  --lh-name:  1.3;

  /* ---- Простір ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;

  --container-max: 1620px;
  --gutter: 16px;              /* mobile */
  --section-gap: 56px;         /* mobile */
  --grid-gap: 8px;             /* сітка колекції, mobile */

  /* ---- Форма ---- */
  --radius-pill:  999px;
  --radius-badge: 3px;
  --radius-input: 8px;
  --radius-card:  0px;
  --border: 1px solid var(--color-line);
  /* тіней немає ніде: глибина — білий простір + лінії 1px */

  /* ---- Дотик ---- */
  --tap-min: 44px;
  --btn-h-primary: 56px;
  --btn-h-secondary: 48px;
  --input-h: 48px;
  --sticky-bar-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Рух ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---- Медіа ---- */
  --ratio-product: 4 / 5;
  --ratio-review: 1 / 1;
}

@media (min-width: 600px) {  /* md */
  :root {
    --gutter: 24px;
    --grid-gap: 16px;
    --section-gap: 72px;
    --fs-section: 48px;
    --fs-h1-cat: 48px;
    --fs-h1-product: 34px;
    --fs-price-pdp: 26px;
    --fs-price-card: 18px;
    --fs-name-card: 16px;
  }
}

@media (min-width: 1024px) { /* lg */
  :root {
    --gutter: 30px;
    --section-gap: 96px;
    --grid-gap: 24px;
    --fs-hero: 120px;
    --fs-h1-cat: 80px;
    --fs-section: 80px;
    --fs-h1-product: 55px;
    --fs-price-pdp: 28px;
    --fs-price-card: 20px;
    --fs-name-card: 16px;
    --fs-btn: 18px;
    --fs-doc-head: 26px;
  }
}

/* ============================================================
   Міст до змінних Dawn.
   Успадковані секції Dawn читають --font-*-family і --color-*; перевизначаємо їх
   тут, щоб навіть неперероблені шматки теми виглядали фірмово, а не «як Dawn».
   ============================================================ */

:root {
  --font-body-family:    var(--font-body);
  --font-body-style:     normal;
  --font-body-weight:    400;
  --font-body-weight-bold: 700;

  --font-heading-family: var(--font-display);
  --font-heading-style:  normal;
  --font-heading-weight: var(--display-weight);

  --page-width: var(--container-max);
  --page-width-margin: 0rem;

  /* Тіней немає ніде — глушимо всі тіньові змінні Dawn. */
  --media-shadow-opacity: 0;
  --card-shadow-opacity: 0;
  --badge-corner-radius: var(--radius-badge);
  --buttons-radius: var(--radius-pill);
  --inputs-radius: var(--radius-input);
}

*:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}