/* Смакопис — дизайн-токени
   Тема "Сіль" (світла, стартова) як основа лендінгу,
   "Чорний перець" (темна) для контрастних секцій.
   Золото — лише преміум. Зелений/бурштиновий/цегляний — лише час/складність.
   Червоний — лише руйнівні дії (на лендінгу не використовується). */

:root {
  /* --- Сіль: світла тема --- */
  --salt-ink: #22252c;         /* графіт — текст, знак на світлому */
  --salt-surface: #ffffff;     /* картки */
  --salt-bg: #f4f5f7;          /* тло світлих секцій */
  --salt-bg-warm: #f7f4ee;     /* тепліше тло під фото-секціями */
  --salt-line: #dfe1e6;        /* тонкі розділювачі */
  --salt-muted: #6b7078;       /* другорядний текст на світлому */

  /* --- Чорний перець: темна тема --- */
  --pepper-bg: #1c1f25;        /* тло темних секцій */
  --pepper-surface: #262a31;   /* картки на темному */
  --pepper-ink: #f4f5f7;       /* текст на темному */
  --pepper-accent: #8fa6c4;    /* знак і акценти на темному ("чорний перець") */
  --pepper-muted: #9aa0aa;     /* другорядний текст на темному */
  --pepper-line: #363a42;

  /* --- Семантика (використовувати лише за призначенням) --- */
  --gem-gold: #cf9f3f;         /* тільки ознака преміуму */
  --gem-gold-deep: #a9812e;
  --scale-fast: #4f8f68;       /* час/складність: швидко-легко */
  --scale-mid: #c98a2d;        /* середнє */
  --scale-slow: #a6543f;       /* довго-складно */
  --destructive: #b23b2e;      /* лише кошик/видалення */

  /* --- Типографіка --- */
  --font-head: "e-Ukraine Head", "Segoe UI", sans-serif;
  --font-body: "e-Ukraine", "Segoe UI", sans-serif;

  /* Плинна шкала — росте й стискається разом з в'юпортом і довжиною тексту */
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);

  /* --- Сітка знаку: поле 48×48, безпечне поле 6 --- */
  --mark-safe: 6;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --container: 1160px;
  --gap: clamp(1rem, 0.8rem + 1vw, 2rem);
}