/*
 * tokens.css — дизайн-токены лендинга «Фирмач Бородач».
 *
 * Здесь собраны все базовые переменные оформления (палитра, типографика,
 * радиусы, тени, отступы, тайминги анимаций, контейнеры и z-index).
 * Любой компонент должен опираться на эти токены, а не на «магические» значения,
 * чтобы стиль оставался единым и легко перекрашивался.
 *
 * Палитра синхронизирована с 02-project-rules.md и 03-design-references.json
 * (направление дизайна «Dark Barbershop Science»).
 */

:root {
  /* --- Базовые цвета фона --- */
  --fb-bg: #050505;            /* основной чёрный фон */
  --fb-bg-soft: #0b0b0b;       /* мягкий графит для чередующихся секций */
  --fb-card: #11100e;          /* тёмная карточка */
  --fb-card-2: #17130d;        /* глубокий коричневый для акцентных карточек */

  /* --- Золото, крем, текст --- */
  --fb-kraft: #b98a54;         /* крафтовый коричнево-золотой */
  --fb-gold: #c89442;          /* основной золотой акцент */
  --fb-gold-soft: #e1b767;     /* мягкое золото для бликов/градиентов */
  --fb-cream: #f3ead7;         /* кремовый — основной цвет текста заголовков */
  --fb-muted: #a89d8c;         /* приглушённый текст для описаний */
  --fb-line: rgba(225, 183, 103, 0.28); /* тонкие золотые линии и рамки */
  --fb-danger: #c6573f;        /* цвет ошибок/предупреждений */
  --fb-science-glow: #5ba8ff;  /* холодное «научное» свечение активов */

  /* --- Производные цвета --- */
  --fb-gold-glow: rgba(200, 148, 66, 0.35);
  --fb-cream-dim: rgba(243, 234, 215, 0.72);
  --fb-overlay: rgba(5, 5, 5, 0.82);

  /* --- Градиенты --- */
  --fb-gradient-gold: linear-gradient(135deg, var(--fb-gold-soft), var(--fb-gold));
  --fb-gradient-dark: linear-gradient(180deg, #0b0b0b 0%, #050505 100%);
  --fb-gradient-hero: radial-gradient(
    1200px 700px at 75% 40%,
    rgba(185, 138, 84, 0.18),
    transparent 60%
  );

  /* --- Типографика --- */
  --fb-font-head: "Oswald", "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  --fb-font-body: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --fb-font-accent: "PT Serif", Georgia, "Times New Roman", serif;

  /* Плавные размеры шрифтов (clamp: mobile → desktop). */
  --fb-fs-eyebrow: 0.82rem;
  --fb-fs-small: 0.9rem;
  --fb-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fb-fs-lead: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  --fb-fs-h3: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem);
  --fb-fs-h2: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  --fb-fs-h1: clamp(2.3rem, 1.5rem + 4vw, 4.6rem);

  --fb-lh-tight: 1.05;
  --fb-lh-head: 1.12;
  --fb-lh-body: 1.65;
  --fb-tracking-wide: 0.18em;
  --fb-tracking-head: 0.01em;

  /* --- Раскладка / контейнеры --- */
  --fb-container: 1180px;
  --fb-container-wide: 1360px;
  --fb-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --fb-section-py: clamp(3.5rem, 2rem + 6vw, 7rem);

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

  /* --- Тени --- */
  --fb-shadow-card: 0 18px 50px rgba(0, 0, 0, 0.55);
  --fb-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45);
  --fb-shadow-gold: 0 12px 36px rgba(200, 148, 66, 0.22);

  /* --- Анимации --- */
  --fb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fb-dur-fast: 180ms;
  --fb-dur: 320ms;
  --fb-dur-slow: 600ms;
  --fb-dur-reveal: 800ms;

  /* --- Слои (z-index) --- */
  --fb-z-header: 100;
  --fb-z-drawer: 200;
  --fb-z-sticky-cta: 90;
  --fb-z-top: 300;

  /* Высота шапки — используется для отступов и scroll-margin якорей. */
  --fb-header-h: 76px;
}