/* ============================================
   DESIGN TOKENS
   Дизайн-система проекта (см. DESIGN_SYSTEM.md)
   ============================================ */

:root {
  /* ──────── DARK SURFACES ──────── */
  --color-bg:              #0E0F0D;
  --color-bg-elev:         #171815;
  --color-bg-elev-2:       #1F211D;
  --color-line:            #2A2B27;

  /* ──────── DARK TEXT ──────── */
  --color-ink:             #F4F1E8;
  --color-ink-muted:       #9A9A90;
  --color-ink-dim:         #5C5C55;

  /* ──────── LIGHT SURFACES ──────── */
  --color-bg-light:        #F2F0EA;
  --color-bg-light-elev:   #FFFFFF;
  --color-ink-light:       #13140F;
  --color-ink-light-muted: #6B6B63;
  --color-line-light:      rgba(0, 0, 0, 0.06);

  /* ──────── ACCENTS ──────── */
  --color-accent:          #D4F56A;
  --color-accent-dark:     #B8DF3F;
  --color-accent-glow:     rgba(212, 245, 106, 0.18);
  --color-accent-glow-strong: rgba(212, 245, 106, 0.35);

  /* ──────── SIGNALS ──────── */
  --color-warn:            #D94A2E;
  --color-safe:            #7CC68A;

  /* ──────── FONTS ──────── */
  /* Единая типографика — Geist везде. --font-serif оставлен как алиас
     для совместимости со старыми правилами, но указывает на тот же Geist. */
  --font-sans:   'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ──────── SPACING (8pt) ──────── */
  --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;

  /* ──────── RADII ──────── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      18px;
  --radius-xl:      24px;
  --radius-section: 60px;
  --radius-pill:    999px;

  /* ──────── SHADOWS ──────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-accent-glow: 0 0 0 4px rgba(212, 245, 106, 0.18);
  --shadow-section-top: 0 -20px 40px rgba(0, 0, 0, 0.15);

  /* ──────── CONTAINER ──────── */
  --container-max:            1280px;
  --container-padding-mobile: 16px;
  --container-padding-tablet: 32px;
  --container-padding-desktop: 64px;
  --grid-gap:                 24px;

  /* ──────── TRANSITIONS ──────── */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.2s ease-out;
  --transition-slow: 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ──────── Z-INDEX ──────── */
  --z-header:   100;
  --z-sticky:   90;
  --z-backdrop: 500;
  --z-modal:    600;
  --z-toast:    700;
}