/* ============================================================
   VEYL — Design Tokens  («объятие дома»)
   ------------------------------------------------------------
   Brand guide (VEYL BRAND, Guideline 2025), STRICT:
   • Khaki #2A291D — основной тёмный: цвет текста на светлом
     И фон тёмных секций (studio / b2b / footer).
   • Terracotta #661906 — ACCENT ONLY: CTA / цифры / active.
   • Grezh #CEC9C5 — тёплый светлый, разделители/подложки.
   • Paper #F9F9F9 — фон страницы.  Near-black #1D1D1D — резерв.
   Type: Druk Extra Bold (display, caps, wide) + Manrope (body, -5%).
   Load order: tokens.css → main.css → responsive.css
   ============================================================ */

:root{
  /* ---- Brand palette (VEYL BRAND / COLOR SETUP) ---- */
  --khaki:#2A291D;            /* осн. тёмный: текст на светлом + тёмные секции */
  --terra:#661906;           /* акцент: терракота/кирпич                      */
  --grezh:#CEC9C5;           /* тёплый светло-серый / греж                    */
  --paper-pure:#F9F9F9;      /* почти-белый фон                               */
  --ink-true:#1D1D1D;        /* почти-чёрный (резерв)                         */

  /* ---- Semantic (имена сохранены ради совместимости компонентов) ---- */
  --ink:#2A291D;              /* text + dark sections  (= khaki)             */
  --paper:#F9F9F9;            /* page background                             */
  --wine:#661906;             /* ACCENT ONLY: CTA / numbers / active (терракота) */
  --wine-d:#4d1305;           /* accent hover / pressed                      */
  --line:rgba(42,41,29,.14);  /* hairline dividers on light                 */
  --muted:rgba(42,41,29,.58); /* secondary text on light                    */

  /* ---- On-dark helpers (studio / b2b / footer на хаки) ---- */
  --on-dark:#ffffff;
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-66:rgba(255,255,255,.66);
  --on-dark-60:rgba(255,255,255,.6);
  --on-dark-50:rgba(255,255,255,.5);
  --on-dark-45:rgba(255,255,255,.45);
  --on-dark-40:rgba(255,255,255,.4);
  --on-dark-line:rgba(255,255,255,.18);
  --on-dark-hairline:rgba(255,255,255,.12);
  --reed-light:rgba(255,255,255,.05);  /* паттерн-моив (silhouette) — тёмные секции */
  --reed-b2b:rgba(255,255,255,.045);

  /* ---- Radii & motion ---- */
  --r:9px;
  --r-lg:14px;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ---- Type families ----
     'Druk' стоит первым: как только клиент пришлёт реальные woff2 Druk
     и мы добавим @font-face family:'Druk', заголовки подхватят его автоматом.
     До тех пор — Archivo Expanded (широкий тяжёлый, self-host). */
  --font-display:'Druk','Archivo Expanded','Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'Manrope',ui-monospace,monospace;

  /* ---- Layout scale ---- */
  --maxw:1280px;              /* default content width          */
  --maxw-narrow:1080px;       /* comparison table column        */
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(48px,6vw,96px);
  --section-y-lg:clamp(64px,8vw,120px);
  --grid-gap:16px;

  /* ---- Before/after slider position (JS updates this) ---- */
  --ba:50%;
}