/* ============================================================
   A-ГОЛОС · design tokens
   Все цвета/шрифты/радиусы как CSS-переменные.
   Только этот файл достаточно переопределить, чтобы перекрасить.
   ============================================================ */

:root {
  /* ─── color · backgrounds ─────────────────────────── */
  --bg-0: #07080D;          /* самый тёмный, край страницы */
  --bg-1: #0B0D16;          /* основной фон (как на текущем сайте) */
  --bg-2: #11141F;          /* поднятые поверхности */
  --bg-3: #181B2A;          /* карточки */
  --bg-4: #232739;          /* hover */

  /* ─── color · ink ─────────────────────────────────── */
  --ink-0: #FFFFFF;
  --ink-1: #DADCE6;
  --ink-2: #9094A6;
  --ink-3: #5B5F73;
  --ink-4: #3A3D4D;

  /* ─── color · brand red (из логотипа) ─────────────── */
  --red-0: #FB1A26;
  --red-1: #DA0112;
  --red-2: #F10212;
  --red-deep: #73010A;
  --red-darker: #860107;
  --red-glow: rgba(251, 26, 38, 0.55);
  --red-soft: rgba(251, 26, 38, 0.12);
  --red-line: rgba(251, 26, 38, 0.28);

  /* ─── color · semantic ────────────────────────────── */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --highlight-add: rgba(251, 26, 38, 0.22);   /* подсветка вставленного */
  --highlight-del: rgba(255, 255, 255, 0.12); /* зачёркнутое */

  /* ─── radii ───────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ─── spacing rhythm ──────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ─── type families ──────────────────────────────── */
  --ff-sans: "Onest", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-serif: "Spectral", Georgia, serif;     /* italic-only */
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ─── type scale (clamp(min, vw, max)) ────────────── */
  --t-display:  clamp(64px, 9vw, 168px);
  --t-h1:       clamp(48px, 6vw, 104px);
  --t-h2:       clamp(36px, 4.5vw, 72px);
  --t-h3:       clamp(24px, 2.3vw, 36px);
  --t-h4:       clamp(20px, 1.6vw, 26px);
  --t-body:     17px;
  --t-body-lg:  20px;
  --t-meta:     12px;

  /* ─── motion ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── shadows ─────────────────────────────────────── */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                 0 24px 60px -20px rgba(0,0,0,0.6),
                 0 6px 18px -8px rgba(0,0,0,0.5);
  --shadow-cta: 0 12px 28px -8px rgba(251,26,38,0.55),
                0 2px 0 rgba(255,255,255,0.18) inset;

  /* ─── layout ──────────────────────────────────────── */
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 64px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-out: linear;
    --ease-in: linear;
    --ease-spring: linear;
  }
}