/* ================================================================
   maxim88soccer.com — base.css
   Live Arena design system — tokens, reset, typography
   ================================================================ */

/* Inter font — @import MUST be before any other rules (CSS spec) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

:root {
  color-scheme: dark;
  /* --- Base backgrounds (deep forest green) --- */
  --bg-900: #061A0D;
  --bg-800: #0A2E1A;
  --bg-700: #0F3D22;
  --bg-600: #155C30;

  /* --- Neon emerald accents --- */
  --neon-500: #22A055;
  --neon-400: #2DC96B;
  --neon-300: #6FE09A;
  --neon-200: #A8F0C0;
  --neon-glow: rgba(45, 201, 107, 0.45);

  /* --- Gold accents --- */
  --gold-500: #D4AF37;
  --gold-400: #F0CB5A;
  --gold-dark: #A8881C;

  /* --- Neutrals --- */
  --ink-0:   #FFFFFF;
  --ink-200: #E5E7EB;
  --ink-500: #8A9E92;
  --ink-700: #4A5C51;

  /* --- Signals --- */
  --live:    #2DC96B;
  --danger:  #DC2626;
  --warning: #D97706;

  /* --- Radii --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* --- Fonts --- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Inter', 'JetBrains Mono', monospace;

  /* --- Spacing --- */
  --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;

  /* --- Max widths --- */
  --max-content: 1200px;
  --max-article: 720px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--neon-200);
  background: var(--bg-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--ink-0);
  margin: 0;
}

h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 900; letter-spacing: -1.2px; }
h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -0.5px; }
h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; }

p { margin: 0 0 1em; }

a {
  color: var(--neon-400);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--neon-300); }

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--neon-400);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}