/**
 * NN777 Design Tokens & Typography System
 * Extracted from dominant authoritative domains and benchmark blueprint
 */

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

:root {
  /* Brand Core Colors (Synchronized with brand_palette.json) */
  --brand-primary: #B20000;
  --brand-primary-dark: #7A0000;
  --brand-primary-light: #DC2626;
  --brand-accent-gold: #FEBE23;
  --brand-gold-glow: #FFD400;
  --brand-gold-dark: #D49300;


  /* Surfaces & Dark Mode Hierarchy */
  --surface-base: #0D0305;
  --surface-elevated: #15060A;
  --surface-card: #1E0A10;
  --surface-card-hover: #2B1018;
  --surface-card-border: rgba(255, 215, 0, 0.22);
  --surface-border-subtle: rgba(255, 255, 255, 0.08);

  /* Text & Readability (High Contrast) */
  --text-primary: #FFFFFF;
  --text-secondary: #E4D5D5;
  --text-muted: #A89498;
  --text-gold: #FFD700;

  /* Payment & Trust Accents */
  --trust-green: #00D084;
  --gcash-blue: #007DFE;
  --maya-green: #00E080;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, #24050B 0%, #0D0305 60%, #160408 100%);
  --grad-gold-cta: linear-gradient(180deg, #FFE66D 0%, #FFBE1A 45%, #E69D00 100%);
  --grad-red-cta: linear-gradient(180deg, #FF3B3B 0%, #D31212 50%, #990000 100%);
  --grad-card: linear-gradient(145deg, #1E0A10 0%, #140508 100%);

  /* Shadows & Glows */
  --shadow-gold-glow: 0 0 25px rgba(255, 190, 26, 0.45);
  --shadow-red-glow: 0 0 25px rgba(211, 18, 18, 0.45);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.65);
  --shadow-elevated: 0 14px 40px rgba(0, 0, 0, 0.85);

  /* Typography Scale */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Mobile-first Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Borders & Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

body {
  font-family: var(--font-body);
  background-color: var(--surface-base);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.num-stat, .stat-value, .odds, .multiplier {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-family: var(--font-heading);
}