/* ============================================================
   FIGARO DESIGN SYSTEM — TOKENS
   Единый источник правды: цвета, стекло, отступы, типографика.
   Подключается первым; все компоненты строятся на этих переменных.
   ============================================================ */

:root {
  /* --- Бренд-цвета --- */
  --figaro-accent:        #1F7A5A;   /* ИЗУМРУД — акции, важное, "горячее" (триада с золотом) */
  --figaro-accent-hover:  #2A9A72;
  --figaro-accent-soft:   #3fbd8e;   /* осветлённый изумруд для текста-акцента на тёмном */
  --figaro-gold:       #c4b583;   /* акценты, заголовки, обводки */
  --figaro-gold-soft:  #d8cda6;   /* осветлённое золото для hover */
  --gold-sheen: linear-gradient(100deg,#9a8a55 0%,#c4b583 28%,#f1e8c4 50%,#c4b583 72%,#9a8a55 100%); /* «металл»: светлее по центру */
  --figaro-dark:       #222222;   /* фон тёмных секций, соцсети */
  --figaro-dark-2:     #2c2c2c;   /* приподнятая поверхность на тёмном */
  --figaro-bg:         #f4f4f4;   /* светлый фон / основной текст на тёмном */

  /* --- Семантика текста (на тёмном фоне) --- */
  --text-strong:   #ffffff;       /* заголовки */
  --text-base:     #f4f4f4;       /* основной текст — СВЕТЛЫЙ, не золотой (читаемость!) */
  --text-muted:    rgba(244,244,244,.66);
  --text-gold:     var(--figaro-gold);

  /* --- Матовое стекло (glassmorphism) --- */
  --glass-bg:        rgba(34,34,34,.45);
  --glass-bg-light:  rgba(255,255,255,.08);
  --glass-border:    rgba(196,181,131,.35);   /* золотая тонкая обводка */
  --glass-blur:      14px;
  --glass-shadow:    0 8px 32px rgba(0,0,0,.35);

  /* --- Радиусы --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Тени --- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.25);
  --shadow-md:  0 8px 24px rgba(0,0,0,.30);
  --shadow-accent: 0 6px 20px rgba(31,122,90,.28);

  /* --- Шкала отступов (мобильный приоритет) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Типографика --- */
  /* Шрифты подобраны под уже загруженные на salon-figaro.ru — чтобы не было FOUT-«прыжка».
     Playfair Display (с кириллицей) и Roboto сайт грузит сам (тема Hestia + Elementor). */
  --font-head: "Playfair Display", "Prata", Georgia, "Times New Roman", serif; /* засечный, заголовки */
  --font-body: "Roboto", system-ui, "Segoe UI", Arial, sans-serif;             /* родной шрифт сайта */
  --fs-h1: clamp(28px, 7vw, 44px);
  --fs-h2: clamp(22px, 5.5vw, 34px);
  --fs-h3: clamp(18px, 4.5vw, 24px);
  --fs-body: clamp(15px, 4vw, 17px);
  --fs-small: 13px;
  --lh-tight: 1.15;
  --lh-base: 1.6;
  --tracking-head: .04em;

  /* --- Анимации --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;

  /* --- Пагинация (размер 5) --- */
  --page-size: 5;          /* кол-во видимых элементов на странице (для JS-пагинаторов) */
  --page-dot: 8px;         /* неактивная точка — спокойный кружок */
  --page-dot-active-w: 24px; /* активная — золотая пилюля (эхо черты под заголовком) */
}