/**
 * CSS Design Tokens & Base Reset
 *
 * All custom properties (design tokens) live here so every other stylesheet
 * can reference them.  Changing a token here propagates everywhere.
 */

/* === Design Tokens === */
:root {
  /* Backgrounds */
  --bg:             #0a0e1a;
  --surface:        #131829;
  --surface-bright: #1a2038;
  --border:         #252d45;

  /* Text */
  --text:     #e8eaf0;
  --text-dim: #b0b8d0;
  --text-dim-mobile: #c0c8e0;  /* Lighter dim for small text on mobile */

  /* Brand colors with matching glow variants */
  --accent:       #4fc3f7;
  --accent-glow:  rgba(79, 195, 247, 0.2);

  --green:        #66bb6a;
  --green-glow:   rgba(102, 187, 106, 0.15);

  --red:          #ef5350;
  --red-glow:     rgba(239, 83, 80, 0.15);

  --gold:         #ffd54f;
  --gold-glow:    rgba(255, 213, 79, 0.15);

  --purple:       #ab47bc;
  --purple-glow:  rgba(171, 71, 188, 0.15);

  --orange:       #ff9800;
  --orange-glow:  rgba(255, 152, 0, 0.15);

  /* Heat accents (Game Brief featured players) */
  --accent-hot:  #ff6b35;
  --accent-cold: #5bc4ff;

  /* Shape */
  --radius:    12px;
  --radius-sm:  8px;

  /* Timing — consistent spring feel across all interactive elements */
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1);
  --snap:        cubic-bezier(0.2, 0, 0, 1);

  /* Tap glow — subtle highlight flash on press */
  --tap-glow:    rgba(79, 195, 247, 0.12);
}

/* === Base Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
 * Fixed-body pattern: locks the viewport so iOS/Android cannot rubber-band,
 * pull-to-refresh, or show/hide the address bar.  #app becomes the sole
 * scroll container, making the page behave like a native app shell.
 */
html {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  overscroll-behavior: none;
  /* Kill double-tap-to-zoom globally (iOS ignores user-scalable=no on some versions) */
  touch-action: manipulation;
}

/* #app is the sole scrollable container — everything scrolls inside here */
#app {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100dvh;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* === Mobile native-app lockdown === */

/* Prevent long-press callout menus on images, links, buttons */
img, a, button, .bet-card, .game-card, .sport-card {
  -webkit-touch-callout: none;
}

/* Prevent accidental text selection on UI chrome (keep it on actual content) */
.game-header, .points-bar, .combo-meter, .rank-badge,
.streak-badge, .back-btn, .bet-actions, .wager-picker,
.sport-selector, .game-selector, .section-label,
.event-log, .commentary-bar, .game-summary-bar, .audio-bar {
  -webkit-user-select: none;
  user-select: none;
}

h1, h2, h3,
.score-big,
.points-display,
.bet-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}