/* ============================================================
   Дизайн-система «Скоро Лето» — design tokens.
   Все цвета, размеры, отступы и тени объявлены здесь как
   CSS-переменные. Меняя значения тут, можно перекрасить весь
   сайт целиком. Компоненты не хранят «магических» значений.
   ============================================================ */

:root {
  /* ---------- Цвета: тёплый ботанический минимализм ----------
     Палитра: кремовый фон + два зелёных (бренд) + терракота (призыв к
     действию). Зелёный — навигация, ссылки, «в наличии», бренд.
     Терракота — только «денежные» действия (заказать / в корзину /
     оформить) и цена: тёплый контраст на зелёно-кремовом фоне
     повышает заметность кнопок и, как следствие, конверсию. */
  --color-white:         #ffffff;   /* чистый белый */
  --color-bg:            #faf8f3;   /* основной тёплый кремовый фон */
  --color-bg-soft:       #f3efe6;   /* мягкие фоновые полосы секций */
  --color-bg-muted:      #ece7db;   /* приглушённые блоки, плейсхолдеры */
  --color-surface:       #ffffff;   /* карточки */

  --color-ink:           #333333;   /* основной текст */
  --color-ink-soft:      #565b52;   /* вторичный текст (тёплый серо-зелёный) */
  --color-ink-muted:     #8c8578;   /* подписи, мета (тёплый таупе) */

  --color-accent:        #2f5d3a;   /* тёмный зелёный — бренд, ссылки, навигация */
  --color-accent-strong: #234a2d;   /* темнее (hover) */
  --color-accent-soft:   #e5efe0;   /* светлая зелёная заливка */

  --color-leaf:          #7fa66a;   /* светлый зелёный — декор, вторичный акцент */
  --color-leaf-soft:     #eef3e7;   /* очень светлая зелёная заливка */

  --color-cta:           #d97a4a;   /* терракота — призыв к действию (кнопки покупки) */
  --color-cta-strong:    #c05f30;   /* тёмная терракота (hover) */
  --color-cta-soft:      #fbe8dc;   /* светлая терракотовая заливка */

  --color-line:          #e8e4dc;   /* границы, разделители */
  --color-line-strong:   #d8d2c6;

  --color-danger:        #b44a1c;   /* «нет в наличии», ошибки (жжёная терракота) */
  --color-danger-soft:   #f8e7db;   /* светлый фон ошибки */
  --color-success:       #2f5d3a;   /* «в наличии», успех */
  --color-price:         #b44a1c;   /* цена — тёплая, заметная */

  --color-on-accent:     #ffffff;   /* текст на зелёном фоне */
  --color-on-cta:        #ffffff;   /* текст на терракотовом фоне */

  /* ---------- Декор: бесшовный ботанический узор ----------
     Лёгкие светло-зелёные веточки. Оживляют «пустые» плоскости
     (подвал, баннеры, плейсхолдеры), удерживая внимание. */
  --pattern-botanical: url('../images/pattern-leaves.svg');

  /* ---------- Типографика ---------- */
  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Логотип теперь векторный (assets/images/logo.svg, Cormorant Garamond в кривых).
     Переменная оставлена как запасной семантический шрифт для брендовых надписей. */
  --font-logo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

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

  /* Плавная (fluid) типографика: clamp(min, предпочт., max) */
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);  /* крупные заголовки-герои */
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2:      clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.3rem);    /* вводные абзацы */
  --fs-body:    1.0625rem;   /* 17px основной текст */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-caption: 0.8125rem;   /* 13px подписи */

  --lh-tight:   1.1;
  --lh-heading: 1.15;
  --lh-body:    1.65;

  --ls-tight:   -0.02em;   /* трекинг заголовков */
  --ls-normal:  0;
  --ls-wide:    0.08em;    /* капс-надписи, бейджи */

  /* ---------- Отступы (шкала 4px) ---------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 — «много воздуха» между секциями */

  /* ---------- Раскладка ---------- */
  --container-max: 1280px;   /* базовый контейнер */
  --container-wide: 1520px;  /* широкий контейнер (герой, галереи) */
  --container-narrow: 760px; /* текстовые страницы */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);  /* боковые поля */

  /* ---------- Скругления ---------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---------- Тени (мягкие, премиальные) ---------- */
  --shadow-sm: 0 1px 2px rgba(74, 56, 38, 0.07);
  --shadow:    0 6px 24px rgba(74, 56, 38, 0.10);
  --shadow-lg: 0 18px 50px rgba(74, 56, 38, 0.14);
  --shadow-cta: 0 8px 22px rgba(217, 122, 74, 0.32);   /* тёплое свечение под кнопкой покупки */

  /* ---------- Переходы ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur:      0.25s;
  --dur-slow: 0.4s;

  /* ---------- Слои (z-index) ---------- */
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}