/* =====================================================================
   RAGIMOFF · test/tokens.css
   ЕДИНЫЙ ИСТОЧНИК ДИЗАЙН-ПАРАМЕТРОВ.
   Меняем шрифт / кегль / цвет / отступ ТОЛЬКО здесь — меняется везде.
   Файл первый в очереди загрузки; все остальные стили берут лишь var().
   Темы: data-theme="dark" (основа) и data-theme="light" (зеркало).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&family=Marck+Script&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  /* ── Шрифты: три голоса + подпись (канон §0.16) ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Montserrat', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;
  --font-script:  'Marck Script', 'Segoe Script', cursive;

  /* ── Типографическая шкала ── */
  --fs-hero:  clamp(2.6rem, min(11.2vw, 15vh), 9.6rem);
  --fs-h2:    clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-h3:    clamp(1.3rem, 1.9vw, 1.65rem);
  --fs-lede:  clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body:  1rem;
  --fs-sm:    .88rem;
  --fs-meta:  .68rem;              /* mono-метки капсом */
  --fs-micro: .6rem;               /* номера, теги, FNN-штампы */

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;

  --ls-mega: -.035em;             /* гигантская антиква героя */
  --ls-tight: -.02em;
  --ls-normal: 0;
  --ls-meta:  .22em;              /* трекинг микро-капс */
  --ls-wide:  .32em;

  --lh-hero:  .88;
  --lh-tight: 1.02;
  --lh-h:     1.15;
  --lh-lede:  1.5;
  --lh-body:  1.7;

  /* ── Воздух / сетка ── */
  --max-w:  1380px;
  --w-lede:  33em;                            /* лид героя: ровно 2 строки на десктопе (30.5em текст + запас) */
  --pad-x:  clamp(20px, 5vw, 72px);
  --gap-sec: clamp(84px, 13vh, 168px);
  --gap-block: clamp(36px, 5vw, 72px);
  --gap-items: clamp(16px, 2vw, 28px);

  /* ── Геометрия (§ канон: «атлас, не карточки» — радиусы крошечные) ── */
  --r: 3px;
  --r-lg: 8px;
  --r-pill: 999px;
  --bd-w: 1px;

  /* ── Динамика ── */
  --dur-out: .52s;
  --dur-ui: .22s;
  --e:  cubic-bezier(.23, 1, .32, 1);      /* отъезд, входы */
  --e2: cubic-bezier(.65, 0, .35, 1);      /* зеркала, волны */
  --e-spring: cubic-bezier(.625, .05, 0, 1); /* тема-волна */

  /* ── Светящееся полотно (§0.16 §0.17 — свечение) ── */
  --glow-size: 62vw;
  --glow-a: .16;                             /* прозрачность тёплого свечения */
  --grain: .055;                             /* зерно поверх полотна */

  /* ── Мотив NƏBZ: пульс ── */
  --pulse-w: 1.5px;                          /* толщина ЭКГ-линии */
  --pulse-glow: 0 0 16px rgba(200, 169, 106, .6);
  --pulse-dur: 1.9s;                         /* ритм «двойного удара» */
  --rail-x: clamp(14px, 1.6vw, 30px);        /* отступ правого рельса */
  --rail-h: 32vh;
}

/* ══════════════════════════ ТЁМНАЯ ТЕМА (основа) ═══════════════════════ */
[data-theme="dark"] {
  --bg:     #0A0F18;
  --bg-2:   #0E1522;
  --bg-3:   #141C2B;
  --fg:     #F1ECE3;                          /* кремовый на чернилах */
  --mid:    rgba(241, 236, 227, .78);
  --mute:   rgba(241, 236, 227, .52);
  --acc:    #C8A96A;                          /* золото */
  --acc-2:  #E4CE9C;
  --acc-3:  #8A6A2A;
  --line:   rgba(241, 236, 227, .12);
  --line-2: rgba(241, 236, 227, .26);
  --veil:   rgba(10, 15, 24, .92);
  --glow-a-color: rgba(200, 169, 106, 0.42);
  --glow-b-color: rgba(38, 60, 104, 0.5);
  --inv-bg: #F1ECE3;                          /* инвертированные секции */
  --inv-fg: #0A0F18;
  --acc-on-inv: #8A6A2A;
}

/* ══════════════════════════ СВЕТЛАЯ ТЕМА (зеркало) ════════════════════ */
[data-theme="light"] {
  --bg:     #F4F0E8;
  --bg-2:   #EFEAE1;
  --bg-3:   #E7E0D2;
  --fg:     #14161A;
  --mid:    rgba(20, 22, 26, .8);
  --mute:   rgba(20, 22, 26, .5);
  --acc:    #8A6A2A;                          /* золото густеет */
  --acc-2:  #A6883E;
  --acc-3:  #C8A96A;
  --line:   rgba(20, 22, 26, .14);
  --line-2: rgba(20, 22, 26, .28);
  --veil:   rgba(244, 240, 232, .92);
  --glow-a-color: rgba(200, 169, 106, 0.34);
  --glow-b-color: rgba(233, 224, 205, 0.85);
  --inv-bg: #14161A;
  --inv-fg: #F1ECE3;
  --acc-on-inv: #E4CE9C;
}