/* ==========================================================================
   FLORISTERIA — design tokens
   Джерела: TZ.txt (п.1), TYPOGRAPHY_GUIDE.txt (розділи 02–07), BRIEF.md
   ========================================================================== */

:root {
  /* ---- Палітра (8 тонів brand guide) ---------------------------------- */
  --fl-ivory:      #FBF7F1;   /* основне світле тло */
  --fl-cream:      #F3ECE1;   /* друга поверхня, чергування секцій */
  --fl-rose:       #CE9AA1;   /* дрібний текст / акцент, ніколи для абзаців */
  --fl-sage:       #A7B79A;   /* ботанічний тон */
  --fl-deep-sage:  #6F7E62;   /* кнопки, top bar, instagram, footer */
  --fl-greige:     #C3B8A9;   /* нейтральний: лінії, рамки полів */
  --fl-charcoal:   #2C2A26;   /* текст; абсолютний чорний не використовуємо */

  /* Похідні прозорості (тільки з палітри, без нових кольорів) */
  --fl-charcoal-70: rgba(44, 42, 38, 0.70);  /* плейсхолдери полів, номери 01/02/03 (≈5:1 на Cream) */
  --fl-charcoal-75: rgba(44, 42, 38, 0.75);  /* нижня зупинка градієнта на картках категорій */
  /* 0.55 — ТІЛЬКИ декоративні оверлеї (off-canvas, drawer, модалка міста): на Ivory це 3,39:1,
     а на Cream 3,29:1 — нижче за WCAG 1.4.3 (4,5:1). Для ТЕКСТУ (лейбли 12px, дати, легенди,
     заголовки таблиць) використовуємо --fl-charcoal-70 (5,24:1 на Ivory / 5,00:1 на Cream). */
  --fl-charcoal-55: rgba(44, 42, 38, 0.55);
  --fl-charcoal-45: rgba(44, 42, 38, 0.45);  /* середня зупинка градієнта на картках категорій */
  --fl-charcoal-0:  rgba(44, 42, 38, 0);
  --fl-ivory-70:    rgba(251, 247, 241, 0.70);
  --fl-ivory-45:    rgba(251, 247, 241, 0.45);  /* делікатне підкреслення поточного міста в топбарі */
  --fl-ivory-0:     rgba(251, 247, 241, 0);
  --fl-greige-50:   rgba(195, 184, 169, 0.5);
  --fl-greige-25:   rgba(195, 184, 169, 0.25);  /* тонування Cream-панелі «Про» (референс) */

  /* ---- Семантичні ролі -------------------------------------------------- */
  --fl-bg:        var(--fl-ivory);
  --fl-bg-alt:    var(--fl-cream);
  --fl-text:      var(--fl-charcoal);
  --fl-text-inv:  var(--fl-ivory);
  --fl-line:      var(--fl-greige);
  --fl-accent:    var(--fl-deep-sage);
  --fl-focus:     var(--fl-deep-sage);

  /* ---- Шрифти ----------------------------------------------------------- */
  --fl-font-main:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fl-font-slogan: "EB Garamond", Georgia, "Times New Roman", serif;

  --fl-w-light:  300;   /* основний текст */
  --fl-w-reg:    400;   /* UI-дрібниці */
  --fl-w-medium: 500;   /* заголовки, логотип, кнопки, меню */

  /* ---- Типографічна шкала (гайд, розділ 05) ----------------------------- */
  --fl-h1-size: 40px;  --fl-h1-lh: 1.05; --fl-h1-ls: 0;        /* desktop → 56px */
  --fl-h2-size: 32px;  --fl-h2-lh: 1.12; --fl-h2-ls: 0;        /* desktop → 36px */
  --fl-h3-size: 22px;  --fl-h3-lh: 1.2;  --fl-h3-ls: 0.2px;    /* desktop → 24px */
  --fl-body-size: 18px; --fl-body-lh: 1.6; --fl-body-ls: 0.2px; /* desktop → 20px у hero */
  --fl-label-size: 12px; --fl-label-lh: 1.4; --fl-label-ls: 1.5px;
  --fl-logo-ls: 0.9px;   /* трекінг логотипа — фіксований */
  --fl-slogan-ls: 3px;   /* трекінг слогана — фіксований */
  --fl-btn-ls: 1.5px;
  --fl-nav-ls: 2px;

  /* ---- Ритм і сітка ------------------------------------------------------ */
  --fl-container: 1440px;
  --fl-gutter: 16px;          /* tablet 32px, desktop 56px */
  --fl-grid-gap: 12px;        /* desktop 32px */
  --fl-section-y: 56px;       /* desktop 104px */

  --fl-topbar-h: 32px;
  --fl-header-h: 64px;        /* desktop ~120px */

  --fl-radius: 2px;           /* максимально дозволене скруглення */
  --fl-stroke: 1.25px;        /* товщина лінії іконок 1.25–1.5 */

  --fl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fl-dur: 220ms;
}