/* ============================================================
   «Проектировщик vs AI-инженер» — design tokens (self-contained)
   Скопировано из design-system/project/styles.css + tokens/*.
   Источник правды — дизайн-система; здесь — портативная копия для деплоя.
   ============================================================ */

/* ---- Fonts: Rubik · PT Sans · JetBrains Mono ---- */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=PT+Sans:wght@400;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---- База / студия ---- */
  --bg:         #0E1116;
  --surface-1:  #161A21;
  --surface-2:  #1E232C;
  --surface-3:  #252B36;
  --border:     #2A2F39;
  --border-strong: #3A414E;
  --grid-line:  rgba(255,255,255,0.04);

  /* ---- Бренд-акцент 1 — ОСНОВА (энергия, CTA) ---- */
  --brand-1:         #AD1C42;
  --brand-1-light:   #D42250;
  --brand-1-surface: rgba(173,28,66,0.12);
  --brand-1-border:  rgba(212,34,80,0.40);

  /* ---- Бренд-акцент 2 — «климат / технологии» ---- */
  --brand-2:         #1A5FAD;
  --brand-2-light:   #2E86E0;
  --brand-2-surface: rgba(26,95,173,0.12);
  --brand-2-border:  rgba(46,134,224,0.40);

  /* ---- Телеметрия / live / HUD ---- */
  --hud:        #3DD6E8;
  --hud-surface: rgba(61,214,232,0.10);
  --live:       #2EE6A6;
  --warning:    #F5A524;
  --danger:     #E5484D;
  --success:    #2EE6A6;

  /* ---- Текст на тёмном ---- */
  --fg-1: #F4F6F8;
  --fg-2: #B7BEC8;
  --fg-3: #7C8694;
  --fg-on-brand: #FFFFFF;

  /* ---- Типографика ---- */
  --font-display: 'Rubik', system-ui, sans-serif;
  --font-body:    'PT Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  --fs-hero:  60px;
  --fs-h1:    48px;
  --fs-h2:    38px;
  --fs-h3:    30px;
  --fs-h4:    24px;
  --fs-lead:  20px;
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-meta:  13px;
  --fs-micro: 11px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --ls-hero:    -0.025em;
  --ls-head:    -0.02em;
  --ls-hud:      0.10em;
  --ls-hud-wide: 0.14em;

  /* ---- Spacing / layout (4px step) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --container:        1280px;
  --container-pad:    32px;
  --container-pad-sm: 16px;
  --section-y:        88px;

  --radius-pill: 9999px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;

  --grid-size:   36px;

  /* ---- Effects ---- */
  --inset-hi:  inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-1:  0 1px 2px rgba(0,0,0,0.40), var(--inset-hi);
  --shadow-2:  0 8px 24px rgba(0,0,0,0.45), var(--inset-hi);
  --shadow-3:  0 20px 60px rgba(0,0,0,0.55), var(--inset-hi);

  --glow-brand-1: 0 0 0 1px var(--brand-1-border), 0 8px 32px rgba(173,28,66,0.30);
  --glow-brand-2: 0 0 0 1px var(--brand-2-border), 0 8px 32px rgba(26,95,173,0.30);
  --glow-hud:     0 0 0 1px rgba(61,214,232,0.30), 0 0 24px rgba(61,214,232,0.18);

  --ring: 0 0 0 3px rgba(46,134,224,0.45);

  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --dur-micro: 200ms;
  --dur-base:  350ms;

  --glass-bg:     rgba(22,26,33,0.66);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur:   blur(16px) saturate(140%);

  --blueprint:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --blueprint-size: var(--grid-size) var(--grid-size);

  --field-brand-1: radial-gradient(60% 60% at 0% 0%, rgba(173,28,66,0.16), transparent 70%);
  --field-brand-2: radial-gradient(60% 60% at 100% 0%, rgba(26,95,173,0.16), transparent 70%);
}