/* ============================================
   SportJournal — Design System Variables
   Тёмная тема (dark-only)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Dark-only theme */
:root {
  /* ─── Цветовая палитра ─── */
  --color-primary:       #0F172A;
  --color-accent:        #818CF8;
  --color-accent-hover:  #6366F1;
  --color-live:          #10B981;
  --color-live-bg:       #064E3B;
  --color-danger:        #DC2626;
  --color-danger-light:  #450A0A;
  --color-warning:       #F59E0B;

  /* ─── Фоны и поверхности ─── */
  --bg-body:             #0F172A;
  --bg-surface:          #1E293B;
  --bg-surface-hover:    #334155;
  --bg-elevated:         #334155;
  --bg-header:           #020617;
  --bg-mega-menu:        #0F172A;
  --bg-footer:           #020617;

  /* ─── Текст ─── */
  --text-primary:        #F8FAFC;
  --text-secondary:      #CBD5E1;
  --text-muted:          #64748B;
  --text-inverse:        #0F172A;
  --text-link:           #818CF8;

  /* ─── Границы ─── */
  --border-color:        #334155;
  --border-color-strong: #475569;

  /* ─── Типографика ─── */
  --font-heading:  'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:     'Inter', 'Segoe UI', sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ─── Spacing ─── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;

  /* ─── Радиусы ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Тени ─── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);

  /* ─── Z-Index Scale ─── */
  --z-dropdown:   30;
  --z-sticky:     40;
  --z-mega-menu:  45;
  --z-header:     50;
  --z-overlay:    55;
  --z-modal:      60;
  --z-tooltip:    70;

  /* ─── Переходы ─── */
  --transition-fast:   150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ─── Контейнер ─── */
  --container-max:  1280px;
  --sidebar-width:  320px;
  --header-height:  64px;
  --ticker-height:  40px;
}