/* ============================================================================
   PersonaMarket — Design tokens
   Источник: Figma (file key NuT1rScsJldwt5zyu4afMM, persona-market design proto).
   ============================================================================ */

:root {
  /* ---- Core colors ---- */
  --pm-color-bg:         #F9F9F9;   /* background grey — основной фон страницы */
  --pm-color-surface:    #FFFFFF;   /* белые карточки/navbar */
  --pm-color-fg:         #000000;
  --pm-color-muted:      #9C9C9C;
  --pm-color-border:     #DFDFDF;
  --pm-color-on-primary: #FFFFFF;

  /* ---- Brand / accent colors ---- */
  --pm-color-pink:        #F7AEBD;  /* promo секция */
  --pm-color-pink-soft:   #FFEFF2;  /* soft вариант */
  --pm-color-green:       #B7C24D;  /* bright green (CTA зелёная) */
  --pm-color-green-dark:  #9AA53C;  /* hover для green */
  --pm-color-footer-bg:   #262626;
  --pm-color-sale:        #FF3474;  /* badge Sale */
  --pm-color-gray-900:    #1A1A1A;

  /* ---- Signature gradient (CTA) ---- */
  --pm-gradient-cta: linear-gradient(-57deg, #CFA437 0%, #FFA9E1 99%);

  /* ---- Typography ---- */
  /* Z6 (07.05.2026): основной шрифт — Inter Tight (display) + Inter (body).
     Roboto в fallback-цепочке на случай если Google Fonts не загрузятся. */
  --pm-font-sans:    "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --pm-font-display: "Inter Tight", "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --pm-font-huge:    "Inter Tight", "Inter", "Roboto", system-ui, sans-serif;

  --pm-fs-xs:      12px;
  --pm-fs-sm:      14px;
  --pm-fs-base:    16px;
  --pm-fs-md:      18px;
  --pm-fs-lg:      24px;
  --pm-fs-xl:      32px;
  --pm-fs-2xl:     48px;   /* H2 */
  --pm-fs-3xl:     56px;   /* H1 hero */
  --pm-fs-display: 128px;  /* декоративные надписи в promo */

  --pm-lh-tight:  1.2;
  --pm-lh-normal: 1.5;

  --pm-fw-regular:  400;
  --pm-fw-medium:   500;
  --pm-fw-semibold: 600;
  --pm-fw-bold:     700;

  /* ---- Spacing ---- */
  --pm-sp-4:   4px;
  --pm-sp-8:   8px;
  --pm-sp-12:  12px;
  --pm-sp-16:  16px;
  --pm-sp-24:  24px;
  --pm-sp-32:  32px;
  --pm-sp-48:  48px;
  --pm-sp-64:  64px;
  --pm-sp-40:  40px;
  --pm-sp-80:  80px;
  --pm-sp-112: 112px;

  /* ---- Layout ---- */
  --pm-container-max: 1440px;
  --pm-container-pad: var(--pm-sp-64);
  --pm-grid-gap:      var(--pm-sp-32);

  /* ---- Radii ---- */
  --pm-radius-sm:   4px;
  --pm-radius-md:   8px;
  --pm-radius-lg:   32px;
  --pm-radius-pill: 31px;

  /* ---- Border / stroke ---- */
  --pm-border-w: 1px;

  /* ---- Motion ---- */
  --pm-ease:        cubic-bezier(0.2, 0, 0, 1);
  --pm-duration-1:  150ms;
  --pm-duration-2:  250ms;

  /* ---- Shadows ---- */
  --pm-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pm-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* ---- Z-index ---- */
  --pm-z-header:  100;
  --pm-z-overlay: 900;
  --pm-z-modal:   1000;
}

@media (max-width: 1199px) {
  :root {
    --pm-container-pad: var(--pm-sp-32);
    --pm-fs-3xl: 44px;
    --pm-fs-2xl: 36px;
  }
}

@media (max-width: 767px) {
  :root {
    --pm-container-pad: var(--pm-sp-16);
    --pm-fs-3xl: 32px;
    --pm-fs-2xl: 28px;
    --pm-fs-xl:  24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pm-duration-1: 0ms;
    --pm-duration-2: 0ms;
  }
}