/* ============================================================
   00 — DESIGN TOKENS
   "Реальное колесо" — брутальный индустриальный шиномонтаж
   Палитра: чёрный + красный + ржавчина
   ============================================================ */

:root {
  /* --- Поверхности (тёплый чёрный, не пластиковый) --- */
  --ink:        #0b0a09;   /* фон страницы            */
  --ink-2:      #131110;   /* панель                  */
  --ink-3:      #1c1814;   /* приподнятая панель      */
  --ink-4:      #251f19;   /* hover / выделение       */
  --line:       #2c241d;   /* тонкие границы          */
  --line-strong:#3a2f25;   /* акцентные границы        */

  /* --- Текст (бетон/кость) --- */
  --bone:       #ece5d8;   /* основной текст          */
  --bone-dim:   #9c9387;   /* приглушённый            */
  --bone-faint: #6a6258;   /* служебный               */

  /* --- Красный (бренд / опасность) --- */
  --red:        #e21414;
  --red-bright: #ff2a2a;
  --red-deep:   #9d0d0d;
  --red-glow:   rgba(226, 20, 20, 0.45);

  /* --- Ржавчина (акцент-тепло) --- */
  --rust:       #b5491f;
  --rust-2:     #d4691f;
  --rust-3:     #e8853a;
  --hazard:     #f2b705;   /* жёлтый, очень дозированно */

  /* --- Семантические --- */
  --accent:     var(--red);
  --bg:         var(--ink);
  --fg:         var(--bone);

  /* --- Типографика --- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* Модульная шкала */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0:  clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  --step-1:  clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --step-2:  clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-3:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-4:  clamp(3.4rem, 2.1rem + 6.2vw, 7.8rem);

  /* --- Пространство --- */
  --gutter: clamp(1.2rem, 0.8rem + 2vw, 3rem);
  --section-pad: clamp(4.5rem, 3rem + 7vw, 9rem);
  --maxw: 1320px;

  /* --- Скелет брутализма --- */
  --radius: 0px;             /* никаких скруглений */
  --border: 2px solid var(--line-strong);
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-red: 8px 8px 0 var(--red-deep);

  /* --- Движение --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur: 0.55s;
}