/* ============================================================
   DBC / Playbreaker – theme.css  (v2 – 2026 redesign)
   Загружается ПЕРВЫМ. Все остальные .css опираются на эти
   переменные. Не переопределяй их в других файлах.
   ============================================================ */

/* ── Google Fonts (DM Sans как body, Roboto Slab как display) ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Roboto+Slab:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── палитра фонов ── */
  --bg:       #04020D;
  --bg0:      #04020D;
  --bg1:      #080E1E;
  --bg2:      #0D1628;
  --card:     #090F1F;
  --panel:    #0C1224;

  /* ── текст ── */
  --fg:       #F0F4FF;
  --text:     #E8EDFF;
  --muted:    #7A8AAB;
  --subtle:   #4A5572;

  /* ── бордеры / разделители ── */
  --line:      #161F38;
  --line-hi:   #1E2D4A;
  --line-glow: rgba(65,189,217,.18);

  /* ── бренд ── */
  --brand:    #FF6B35;
  --brand1:   #41BDD9;
  --brand2:   #FF6B35;
  --accent:   #A78BFA;

  /* ── глоу-акценты ── */
  --glow-cyan:   rgba(65,189,217,.22);
  --glow-orange: rgba(255,107,53,.18);
  --glow-purple: rgba(167,139,250,.14);

  /* ── семантические ── */
  --ok:    #22C55E;
  --warn:  #F59E0B;
  --err:   #EF4444;

  /* ── команды ── */
  --home:  #FF6B35;
  --away:  #41BDD9;

  /* ── layout ── */
  --radius:    13px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --shadow:    0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset;

  /* ── transition ── */
  --t-fast:   .12s ease;
  --t-normal: .22s ease;
  --t-slow:   .4s ease;
}

/* ══════════════════════════════════════════════════════════
   BASE RESET
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Display font: Roboto Slab (headings, labels, counts) */
/* Body font: DM Sans (tables, body text, help, inputs) */

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  font: 400 14px/1.55 "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Многослойный фон: глобальные гло-пятна + базовый цвет */
  background:
    radial-gradient(ellipse 700px 500px  at 8%  15%,  rgba(65,189,217,.07),  transparent),
    radial-gradient(ellipse 600px 400px  at 90% 75%,  rgba(255,107,53,.055), transparent),
    radial-gradient(ellipse 900px 600px  at 55% 105%, rgba(167,139,250,.05), transparent),
    var(--bg);
  background-attachment: fixed;
}

/* ── Noise-текстура поверх всего ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  /* Inline SVG-шум: тихий grain, почти неощутим */
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── кириллические/UI-шрифты для форм и кнопок ── */
button, input, select, textarea {
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── headings → Roboto Slab ── */
h1, h2, h3, h4, .h1, .h2, .h3,
th, summary, .tabBtn,
.countryCollapsible > summary,
.leagueCollapsible > summary { font-family: "Roboto Slab", serif; }

/* ── scrollbar ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: #232e4a; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #2e3d5e; }

/* ── text selection ── */
::selection { background: rgba(65,189,217,.25); color: #fff; }

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}