/* ==========================================================================
   VELURA — Design tokens
   Дизайн-система інтернет-магазину чохлів для меблів
   ========================================================================== */

:root {
  /* ---- Типографіка ---- */
  --font-display: "Unbounded", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Модульна шкала (clamp: моб → десктоп) */
  --fs-display: clamp(2.25rem, 1.25rem + 4.4vw, 4.5rem);
  --fs-h1: clamp(1.875rem, 1.15rem + 3.2vw, 3.375rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 2.1vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-2xs: 0.6875rem;

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-base: 1.62;

  --ls-display: -0.03em;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.16em;

  /* ---- Кольори: світла тема (основна) ---- */
  --ink: #1B1614;          /* основний текст */
  --ink-2: #4A423D;        /* вторинний текст */
  --ink-3: #7C736B;        /* приглушений */
  --ink-inv: #FBF8F3;      /* текст на темному */

  --bg: #FFFFFF;
  --bg-cream: #FBF8F3;     /* тепле полотно секцій */
  --bg-sand: #F2EADF;      /* пісочний акцент-фон */
  --bg-dark: #1B1614;      /* темні секції / футер */
  --bg-dark-2: #2A2320;

  --line: #E7DFD3;
  --line-2: #F0E9DE;
  --line-dark: rgba(251, 248, 243, .14);

  --accent: #A4623C;       /* карамель / терракота */
  --accent-2: #86492A;     /* hover */
  --accent-soft: #F7EEE6;
  --accent-ink: #FFFFFF;

  --sale: #C2452F;         /* стара ціна, знижка */
  --sale-soft: #FCEDE9;
  --success: #2E7D57;
  --success-soft: #E8F4ED;
  --warn: #B27A12;
  --warn-soft: #FBF1DD;
  --star: #E0A22B;

  /* ---- Радіуси ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Тіні (теплі, м'які) ---- */
  --sh-xs: 0 1px 2px rgba(27, 22, 20, .05);
  --sh-sm: 0 2px 8px rgba(27, 22, 20, .06);
  --sh: 0 6px 22px rgba(27, 22, 20, .08);
  --sh-lg: 0 18px 48px rgba(27, 22, 20, .12);
  --sh-focus: 0 0 0 3px rgba(164, 98, 60, .28);

  /* ---- Сітка / відступи ---- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: 20px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --section-y: clamp(56px, 4vw + 32px, 112px);

  /* ---- Анімації ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t: .28s;
  --t-slow: .5s;

  /* ---- Шари ---- */
  --z-header: 900;
  --z-drawer: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  --header-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 40px; --header-h: 84px; }
}

/* Плавні анімації вимикаються за системним налаштуванням */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}