/* tokens.css — Direction 01 · Modern Tech Blog (Verge / TechCrunch)
 * Из const a01Tokens = { ... } в a01-verge.jsx
 */

:root {
  /* ── Палитра ───────────────────────────────────────────────────────── */
  --color-bg:          #FBFAF7;
  --color-surface:     #FFFFFF;
  --color-ink:         #0E1116;
  --color-ink-2:       #3A3F47;
  --color-ink-3:       #6B7079;
  --color-rule:        #E6E2D8;
  --color-brand:       #FF4A1C;
  --color-brand-2:     #FF8A3C;
  --color-accent-2:    #0B5BD3;
  --color-good:        #0E8A4A;
  --color-bad:         #C8311A;
  --color-pill:        #F2EFE7;

  /* Декоративные оттенки направления */
  --color-pros-bg:     #F1F9F2;
  --color-pros-line:   #C5E5C9;
  --color-cons-bg:     #FDF3F1;
  --color-cons-line:   #F0C7C0;
  --color-cream:       #FFF7E6;
  --color-cream-2:     #FFE5C2;
  --color-cream-line:  #F2D58A;
  --color-cream-text:  #FFD15B;

  /* Hero gradient stops */
  --color-hero-1:      #0a0e14;
  --color-hero-2:      #1a2332;
  --color-hero-3:      #2a3f5f;
  --color-hero-grid:   #7fdbff;

  /* Семантические алиасы */
  --color-text:        var(--color-ink);
  --color-text-muted:  var(--color-ink-3);
  --color-border:      var(--color-rule);

  /* ── Шрифты ────────────────────────────────────────────────────────── */
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Размеры ───────────────────────────────────────────────────────── */
  --fs-h1:     clamp(2.125rem, 1rem + 5.2vw, 4.5rem);
  --fs-h2:     clamp(1.5rem, 1.05rem + 2vw, 2.375rem);
  --fs-h3:     clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --fs-lede:   clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-body:   clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small:  0.8125rem;
  --fs-mono:   0.75rem;
  --fs-mini:   0.6875rem;

  /* ── Отступы ───────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* ── Радиусы (Verge — закруглённые карточки) ───────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Тени ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 17, 22, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.3);
  --shadow-cta: 0 -8px 24px rgba(0, 0, 0, 0.15);

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-px:  var(--space-4);
  --container-px-lg: 3.5rem;       /* 56px — JSX desktop padding */
  --aside-width:   320px;

  /* ── Transitions ───────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
}

/* Score-bar component variables */
.score-bar {
  --score-bar-track: var(--color-pill);
  --score-bar-height: 10px;
}