/* ==============================================================
   LANDING-TEMPLATE · TOKENS
   Roman Sakutin Design System — post-punk / зин
   Меняй переменные здесь — изменения подхватят все лендинги.
============================================================== */

:root {
  /* === CORE PALETTE === */
  --rs-black:    #000000;
  --rs-white:    #FFFFFF;
  --rs-paper:    #F5F2EC;   /* off-white, как бумага */
  --rs-ink:      #0A0A0A;
  --rs-green:    #00FF00;
  --rs-magenta:  #FF56FF;
  --rs-blue:     #0000FF;
  --rs-cyan:     #67E6F0;
  --rs-red:      #FF2D2D;
  --rs-yellow:   #FFE600;

  /* === PRODUCT ACCENT (меняй per-продукт в локальном <style>) === */
  --accent:       var(--rs-green);
  --accent-ink:   var(--rs-black);   /* текст на акценте */
  --accent-2:     var(--rs-magenta); /* вторичный акцент */

  /* === SEMANTIC === */
  --bg:           var(--rs-paper);
  --surface:      var(--rs-white);
  --surface-alt:  var(--rs-black);
  --text:         var(--rs-black);
  --text-muted:   #3a3a3a;
  --text-invert:  var(--rs-white);
  --border:       var(--rs-black);
  --border-faint: rgba(0,0,0,0.12);

  /* === TYPE === */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(64px, 11vw, 180px);
  --fs-display-l:  clamp(48px, 7.5vw, 120px);
  --fs-display-m:  clamp(36px, 5.5vw, 84px);
  --fs-h1:         clamp(40px, 5vw, 72px);
  --fs-h2:         clamp(30px, 3.4vw, 40px);
  --fs-h3:         clamp(22px, 2.2vw, 32px);
  --fs-body:       17px;
  --fs-body-lg:    20px;
  --fs-small:      14px;
  --fs-micro:      12px;

  --tracking-tight: -0.03em;
  --tracking-crush: -0.04em;
  --tracking-wide:  0.12em;

  --leading-crush: 0.88;
  --leading-body:  1.5;

  /* === LAYOUT === */
  --container:    1280px;
  --container-sm: 960px;
  /* Гаттер флюидный: на 320px забирать 48px (15% экрана) под поля — роскошь.
     ≥533px возвращается к дизайнерским 24px. */
  --gutter:       clamp(16px, 4.5vw, 24px);
  --section-py:   clamp(48px, 9vw, 128px);
  --header-h:     76px;   /* 44 (бургер) + 14×2 (padding) + 4 (border) */

  /* === BORDERS / RADII === */
  --bw-1:   2px;
  --bw-2:   4px;
  --bw-3:   6px;
  --radius: 0;               /* хардкорные углы */
  --radius-pill: 999px;      /* только для чипов */

  /* === MOTION === */
  --ease:   cubic-bezier(0.2, 0.9, 0.25, 1);
  --fast:   120ms;
  --med:    180ms;
  --slow:   280ms;

  /* === SHADOWS (hard-offset, без blur) === */
  --shadow-1: 4px 4px 0 var(--rs-black);
  --shadow-2: 8px 8px 0 var(--rs-black);
  --shadow-3: 12px 12px 0 var(--rs-black);
  --shadow-green:   8px 8px 0 var(--rs-green);
  --shadow-magenta: 8px 8px 0 var(--rs-magenta);
  --shadow-blue:    8px 8px 0 var(--rs-blue);
}

/* ==============================================================
   MOBILE TYPE SCALE (≤600px)

   Проблема базовой шкалы: у всех clamp() вершина vw-слагаемого
   догоняет min только на 582–1000px. Ниже этого типографика
   де-факто ФИКСИРОВАННАЯ и подобрана под планшет — на 320px
   кегль относительно вьюпорта на 17% крупнее, чем на 375px.
   Отсюда переполнения заголовков и «моно+caps» подписей.

   Ниже — вторая ветка шкалы для 320→600px. Каждая формула
   подобрана так, чтобы В ТОЧКЕ 600px совпасть с min базового
   clamp — стыка/скачка на границе медиа-запроса нет.
============================================================== */
@media (max-width: 600px) {
  :root {
    --fs-display-xl: clamp(44px, calc(21.1px + 7.14vw), 64px);  /* 44 → 64 */
    --fs-display-l:  clamp(34px, calc(18.0px + 5.00vw), 48px);  /* 34 → 48 */
    --fs-display-m:  clamp(28px, calc(18.9px + 2.86vw), 36px);  /* 28 → 36 */
    --fs-h1:         clamp(30px, calc(18.6px + 3.57vw), 40px);  /* 30 → 40 */
    --fs-h2:         clamp(24px, calc(17.1px + 2.14vw), 30px);  /* 24 → 30 */
    --fs-h3:         clamp(19px, calc(15.6px + 1.07vw), 22px);  /* 19 → 22 */
    --fs-body:       clamp(16px, calc(14.9px + 0.36vw), 17px);  /* 16 → 17 */
    --fs-body-lg:    clamp(17px, calc(13.6px + 1.07vw), 20px);  /* 17 → 20 */

    /* 0.12em на моноширинном (advance 0.6em) — это +20% к длине КАЖДОЙ
       строки. На узком экране это главный множитель переполнения
       у .eyebrow / .chip / всех mono-подписей. 0.08em сохраняет
       «зинный» разряд, но снимает треть лишней ширины. */
    --tracking-wide: 0.08em;
  }
}

/* === PRESETS для продуктов === */
[data-preset="to-job"]   { --accent: var(--rs-green);   --accent-2: var(--rs-magenta); --accent-ink: #000; }
[data-preset="unity"]    { --accent: var(--rs-magenta); --accent-2: var(--rs-green);   --accent-ink: #000; }
[data-preset="qa"]       { --accent: var(--rs-cyan);    --accent-2: var(--rs-magenta); --accent-ink: #000; }
[data-preset="mono"]     { --accent: var(--rs-white);   --accent-2: var(--rs-green);   --accent-ink: #000; --bg: var(--rs-black); --text: var(--rs-white); --border: var(--rs-white); --surface: var(--rs-black); }