/* CORNER by Levishko — дизайн-токени вітрини.
   Єдине джерело кольору, шрифту й відступів (CLAUDE.md, «Дизайн»).
   Величини заміряні зі зразка Release (13.10.2026), код — власний. */

:root {
  /* --- кольори -------------------------------------------------------- */
  --c-bg: #ffffff;
  --c-fg: #111111;
  --c-fg-muted: #65706e;          /* «другорядний текст» Release (color-scheme-1), 5.1:1 на білому */
  --c-fg-soft: rgba(17, 17, 17, 0.8);   /* описи й довгий текст — як у Release */
  --c-line: #ebebeb;              /* рамки й лінії Release */
  --c-line-strong: #111111;
  --c-surface: #f8f8f8;           /* тло порожніх рамок (у зразку — і під фото товару) */
  --c-photo-bg: #f8f8f8;          /* як у Release; білі пекшоти CORNER лягають через multiply — без рамки */
  --c-sale: #c25151;              /* ціна зі знижкою — як у Release, 6.2:1 */
  --c-sale-badge: #d42020;        /* тло бейджа знижки; у Release #EF2D2D — білий на ньому 4.1:1, нижче норми */
  --c-tag: #5e5a59;               /* бейджі статусу (нема / під замовлення) — «tag» Release */
  --c-on-sale: #ffffff;
  --c-overlay: rgba(17, 17, 17, 0.45);
  --c-footer-bg: #111111;
  --c-footer-fg: #ffffff;
  --c-focus: #111111;

  /* --- шрифт ----------------------------------------------------------- */
  /* Як у Release: Poppins (латиниця, цифри) + Cormorant italic для акцентів (<em> у заголовках).
     У Poppins нема кирилиці (Google Fonts API, 13.10) — кирилиця падає на Montserrat. Зміна — лише тут. */
  --font: "Poppins", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Cormorant", Georgia, "Times New Roman", serif;

  --fs-xxs: 0.625rem;   /* 10px — кнопки, меню, хлібні крихти */
  --fs-xs: 0.75rem;     /* 12px — назва в картці, ціна в картці, підписи */
  --fs-sm: 0.875rem;    /* 14px — основний текст */
  --fs-md: 1rem;
  --fs-lg: 1.3125rem;   /* 21px — назва товару */
  --fs-xl: 1.6875rem;   /* 27px */
  --fs-xxl: 2.9375rem;  /* 47px — заголовок сторінки */

  --lh-body: 1.6;
  --lh-tight: 1.0;
  --ls-heading: -0.04em;
  --ls-caps: 0.1em;     /* кнопки */
  --ls-nav: 0.14em;     /* меню */
  --ls-label: 0.17em;   /* «РОЗМІР» */
  --ls-card: 0.04em;    /* назва в картці */

  /* --- відступи й сітка ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --gutter: 36px;                 /* поля сторінки на десктопі */
  --page-max: 1680px;
  --grid-gap-x: 24px;
  --grid-gap-y: 72px;
  --header-h: 66px;
  --photo-ratio: 3 / 4;           /* як у Release; фото 4:5 заповнюють кадр (cover), обріз ~3 % з боків */

  /* --- форма ---------------------------------------------------------- */
  --radius-pill: 50px;
  --radius-badge: 4px;
  --radius-input: 8px;
  --hairline: 0.5px;
  --option-size: 26px;
  --tap: 44px;                    /* мінімальна ціль дотику */

  /* --- рух (заміряно в зразку: секції 300 мс, фото 600 мс, перший екран 850–1150 мс) --- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* поява: швидкий старт, м'яке гальмування */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);    /* зникнення: прискорення */
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-reveal: 0.45s;
  --t-image: 0.6s;
  --t-slow: 0.7s;
  --t-hero: 1.15s;
  --reveal-shift: 12px;                        /* ui-ux-pro-max: 8–16 px, щоб читалось як проявлення */
  --stagger: 60ms;
}

@media (max-width: 989px) {
  :root {
    --gutter: 16px;
    --grid-gap-x: 16px;             /* Release на телефоні: 16 px між картками */
    --grid-gap-y: 40px;
    --fs-xxl: 1.6875rem;            /* 27 px — заголовки на телефоні, як у Release */
    --header-h: 64px;
  }
}