/* =========================================================
   PLIS ME — design tokens (UI Kit)
   Только цвета из UI Kit. Новые HEX/rgba не добавлять.
   ========================================================= */
:root {
  /* ---- Palette (UI Kit) ---- */
  --color-ink: #111111;
  --color-white: #FFFFFF;
  --color-grey-400: #919191;
  --color-grey-600: #6F6F6F;
  --color-line: #E6E6E6;
  --color-pink: #F2D1D0;
  --color-black: #000000;
  --color-red: #E21F1F;
  --color-olive: #61712C;
  --color-rose: #E98C97;
  --color-sage: #6D8C61;
  --color-ink-soft: #1E1C1D;
  --color-tobacco: #A47955;
  --color-violet: #8F55A4;
  --color-aqua: #96E0E6;
  --color-red-deep: #D82709;
  --color-blush: #FDFAFB;
  --color-cream: #FDFBFA;
  /* Global UI System (остальные страницы) */
  --color-grey-200: #C7C7C7;
  --color-grey-50: #F7F7F7;
  --color-green: #71A575;
  --color-yellow: #EE9441;
  --color-red-status: #DB3D48;
  --color-ink-cool: #24272B;       /* текст бонусного баланса (shared cart) */
  --color-milk: #F5EFE8;
  --color-love-red: #8E1F2B;
  --color-green-scent: #2F756C;
  /* Linear — стиль из UI Kit Figma. TODO: подставить точные значения градиента из Figma.
     Сейчас собран только из токенов палитры и нигде не используется до сверки. */
  --gradient-linear: linear-gradient(180deg, var(--color-white) 0%, var(--color-line) 100%);

  /* ---- Semantic ---- */
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-grey-600);
  --text-muted: var(--color-grey-400);
  --text-inverse: var(--color-white);
  --text-sale: var(--color-red);
  --text-sale-hover: var(--color-red-deep);
  --bg-page: var(--color-white);
  --bg-surface: var(--color-white);
  --bg-announcement: var(--color-ink);
  --bg-subscription: var(--color-blush);
  --bg-stories: var(--color-cream);
  --bg-placeholder: var(--color-line);
  --border-default: var(--color-line);
  --border-strong: var(--color-ink);
  --accent-oval: var(--color-red);
  --focus-ring: var(--color-ink);
  --overlay: var(--color-ink);

  /* Buttons */
  --btn-primary-bg: var(--color-pink);
  --btn-primary-bg-hover: var(--color-rose);
  --btn-primary-text: var(--color-ink);
  --btn-disabled-bg: var(--color-line);
  --btn-disabled-text: var(--color-grey-400);
  --btn-outline-border: var(--color-line);
  --btn-outline-border-hover: var(--color-ink);

  /* Scents (цвет точки аромата) */
  --scent-ferment-5: var(--color-rose);
  --scent-clean-h2o: var(--color-white);
  --scent-revelation: var(--color-line);
  --scent-tobacco-iris: var(--color-tobacco);
  --scent-bergamot-peony: var(--color-sage);
  --scent-wood-sea: var(--color-aqua);
  --scent-self-rule: var(--color-violet);
  --scent-rose: var(--color-rose);
  --scent-milk: var(--color-milk);
  --scent-love-red: var(--color-love-red);
  --scent-green: var(--color-green-scent);

  /* Статусы и поверхности (Global UI System) */
  --status-in-stock: var(--color-green);
  --status-low-stock: var(--color-yellow);
  --status-out-of-stock: var(--color-red-status);
  --status-expected: var(--color-grey-200);
  --bg-subtle: var(--color-grey-50);        /* hover в списках, фон блоков в корзине, отзывы */
  --border-subtle: var(--color-grey-50);    /* разделители корзины, рамка выпадающих списков */
  --border-hover: var(--color-grey-200);    /* hover у secondary-кнопок */
  --overlay-menu: .05;                      /* подложка меню и поиска */
  --overlay-modal: .15;                     /* подложка форм-модалок */
  --overlay-viewer: .2;                     /* подложка просмотра медиа */
  --radius-modal: 16px;
  --radius-panel: 8px;
  --fw-light: 300;
  --fs-24: 24px; --lh-24: 30px;

  /* ---- Typography ---- */
  --font-base: "Gilroy", "Manrope Adjusted", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-8: 8px;   --lh-8: 11px;
  --fs-12: 12px; --lh-12: 16px;
  --fs-14: 14px; --lh-14: 18px;
  --fs-16: 16px; --lh-16: 24px;
  --fs-18: 18px; --lh-18: 29px;
  --fs-20: 20px; --lh-20: 28px;
  --fs-32: 32px; --lh-32: 40px;
  --fs-48: 48px; --lh-48: 58px;

  /* ---- Layout ---- */
  --container-max: 1920px;
  --gutter: 32px;
  --radius-s: 4px;
  --radius-btn: 6px;              /* кнопки — по макету главной */
  --radius-card-btn: 8px;         /* «Купити» в карточке — по макету карточки */
  --header-h: 54px;
  --announcement-h: 36px;
  --title-gap: 52px;            /* от заголовка секции до контента */
  --space-section: 160px;       /* между обычными секциями */
  --space-products: 208px;      /* между товарными секциями */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 600ms;
  --ease-fade: cubic-bezier(.4, 0, .2, 1);
  --dur-gallery: 500ms;           /* смена кадров в карточке товара */

  /* ---- Z-index ---- */
  --z-to-top: 40;
  --z-header: 50;
  --z-menu: 60;                   /* выпадающие меню шапки */
  --z-quiz: 70;                   /* квиз под шапкой */
  --z-toast: 300;                 /* тосты — над всеми диалогами (top layer не используется) */
  --z-skip: 200;
}