/* Megapari design tokens — straight from the official brand guide.
   Source: design/brandbook md mcp/MEGAPARI_BRAND_GUIDE_AI.md §3, §5, §6, §11
   Do not invent hex outside this file. */

:root {
  /* --- Brand primary (§3.1) --- */
  --mp-red: #e6352b;      /* Casino / energy */
  --mp-blue: #1b9dd9;     /* Sport / trust — identity, not controls */
  --mp-yellow: #ed9f02;   /* Promo / rewards */
  --mp-grey: #4a4a4a;     /* Neutral surfaces, borders */

  /* --- Surfaces & text --- */
  --bg: #000413;
  --surface: #222730;
  --surface-2: #171c26;
  --deep-blue: #001f52;
  --text: #eff1f8;
  --text-muted: #a3a7b0;
  --text-on-accent: #d6dcec;
  --hairline: rgba(239, 241, 248, 0.1);

  /* --- UI interactive blues (§3.1 note: brand-blue != UI-blue) --- */
  --ui-blue: #1a5dce;
  --ui-blue-bright: #2066da;
  --btn-hover: radial-gradient(circle at -8% -49%, #3377e9 0%, #0747b0 39%, #0c2f67 81%);
  --focus: #1a5dce;

  /* --- Brand gradients (§3.3) --- */
  --grad-blue: linear-gradient(90deg, rgba(6, 127, 255, 1) 0%, rgba(6, 127, 255, 0) 100%);
  --grad-red: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 100%);
  --grad-gold: linear-gradient(90deg, #fb971e 0%, #ffe77b 25%, #f8a728 50%, #fff090 75%, #e38126 100%);
  --grad-silver: linear-gradient(90deg, #ffffff 0%, #c9cbd5 17%, #ffffff 33%, #e1e1e2 50%, #ffffff 67%, #b4b6b8 83%, #ffffff 100%);
  --grad-ambient: radial-gradient(68.53% 53% at 50% 50%, #2066da 0%, #001f52 100%);

  /* --- Direction tints (§3.2 — sport blue vs casino red, never equal dominants) --- */
  --sport-glow: radial-gradient(60% 60% at 30% 0%, rgba(27, 157, 217, 0.28) 0%, rgba(0, 4, 19, 0) 100%);
  --casino-glow: radial-gradient(60% 60% at 70% 0%, rgba(230, 53, 43, 0.26) 0%, rgba(0, 4, 19, 0) 100%);

  /* --- Typography (§5) --- */
  --font-display: 'Druk Wide Cyr', 'Druk Text Cyr', sans-serif;
  --font-accent: 'Druk Text Cyr', 'Druk Wide Cyr', sans-serif;
  --font-ui: 'Gilroy', 'Montserrat', sans-serif;

  --display: clamp(2.1rem, 5.2vw + 0.4rem, 4.4rem);
  --h1: clamp(1.75rem, 3vw + 0.7rem, 2.75rem);
  --h2: clamp(1.35rem, 1.6vw + 0.75rem, 1.9rem);
  --h3: clamp(1.1rem, 0.8vw + 0.8rem, 1.3rem);
  --body-lg: 1.1875rem;
  --body: 1.0625rem;
  --body-sm: 0.9375rem;
  --caption: 0.8125rem;
  --button: 1rem;

  /* --- Space --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* --- Shape (§6.5) --- */
  --radius-pill: 999px;
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-lg: 18px;

  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 10px 26px rgba(0, 0, 0, 0.45);

  /* --- Motion (§6.5: 0.2–0.4s ease) --- */
  --dur-fast: 200ms;
  --dur: 300ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* --- Layout --- */
  --wrap: min(78rem, calc(100% - 2.5rem));
  --measure: 70ch;
  --nav-h: 4.5rem;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-contrast: more) {
  :root {
    --text-muted: #c9ccd4;
    --hairline: rgba(239, 241, 248, 0.24);
  }
}