/* =============================================================
   BASE.CSS — CSS Variables, Reset, Typography
   This is the single source of truth for all colors and fonts.
   To retheme the entire app, only edit values in :root below.
   ============================================================= */

/* --- Google Fonts ---
   Oswald (headlines + values/wallet via --font-display/--font-mono) is loaded up
   to weight 600: every display/value element requests 600–900, so they all render
   at Oswald SemiBold 600 via the font-matching fallback (no per-element weight
   edits, and Rajdhani body weights stay untouched). Russo One + Orbitron were
   dropped — they were only ever referenced through those two vars. 700 is left
   off deliberately so the existing 700–900 weights don't render heavier than 600;
   add it (and explicit per-spot weights) later if a heavier Oswald is wanted. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Rajdhani:wght@400;600;700&display=swap');

/* --- CSS Custom Properties (Design Tokens) --- */
:root {

  /* == BACKGROUNDS == */
  --bg-deep:    #040f0f;           /* Main app background (almost-black teal) */
  --bg-mid:     #081a1a;           /* Section backgrounds */
  --bg-card:    #0c2222;           /* Elevated card backgrounds */
  --bg-overlay: rgba(4,15,15,0.96);/* Modal/overlay background */

  /* == PRIMARY TEAL == */
  --teal:       #00c4a7;
  --teal-light: #00f0d0;           /* Lighter variant for glow highlights */
  --teal-dark:  #007a68;           /* Darker variant for borders/shadows */
  --teal-glow:  rgba(0,196,167,0.45);

  /* == CRIMSON RED == */
  --crimson:       #dc1c2e;
  --crimson-light: #ff2d42;        /* Lighter for glow */
  --crimson-dark:  #8b1020;
  --crimson-glow:  rgba(220,28,46,0.45);

  /* == GOLD / AMBER == */
  --gold:        #f5a623;
  --gold-bright: #ffd700;          /* Pure gold for highlights */
  --gold-light:  #ffe880;          /* Soft gold */
  --gold-glow:   rgba(245,166,35,0.55);

  /* == TEXT == */
  --text-primary:   #e8f4f2;       /* Body text */
  --text-secondary: #6ab8ac;       /* Muted / helper text */
  --text-gold:      #f5a623;
  --text-white:     #ffffff;

  /* == BORDERS == */
  --border-teal:    rgba(0,196,167,0.30);
  --border-gold:    rgba(245,166,35,0.40);
  --border-crimson: rgba(220,28,46,0.40);

  /* == GRADIENTS == */
  --grad-bg:      linear-gradient(160deg, #040f0f 0%, #081a1a 60%, #040f0f 100%);
  --grad-card:    linear-gradient(145deg, #0c2222 0%, #071515 100%);
  --grad-gold:    linear-gradient(135deg, #b87a10 0%, #f5a623 40%, #ffd700 60%, #f5a623 100%);
  --grad-crimson: linear-gradient(135deg, #6b0e1a 0%, #dc1c2e 50%, #6b0e1a 100%);
  --grad-teal:    linear-gradient(135deg, #005c50 0%, #00c4a7 50%, #005c50 100%);

  /* == TYPOGRAPHY == */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;  /* Headlines — Oswald 600 (was Russo One) */
  --font-mono:    'Oswald', 'Arial Narrow', sans-serif;  /* Values/wallet/numbers — Oswald 600 (was Orbitron) */
  --font-body:    'Rajdhani',     'Arial', sans-serif;   /* Body text (unchanged) */

  /* == SPACING == */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* == RADII == */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* == SHADOWS / GLOWS == */
  --shadow-teal:    0 0 18px var(--teal-glow),    0 0 36px rgba(0,196,167,0.2);
  --shadow-gold:    0 0 18px var(--gold-glow),    0 0 36px rgba(245,166,35,0.2);
  --shadow-crimson: 0 0 18px var(--crimson-glow), 0 0 36px rgba(220,28,46,0.2);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.6);

  /* == LAYOUT == */
  --nav-height: 68px;   /* Bottom nav height — content pads by this amount */
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* Remove blue flash on mobile tap */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%; /* Prevent iOS auto-zoom on orientation change */
}

body {
  background: var(--grad-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  min-height: 100vh;
  min-height: 100dvh;           /* dvh = dynamic viewport, handles mobile browser chrome */
  overflow-x: hidden;
  overscroll-behavior: none;    /* Prevent pull-to-refresh interfering with game */
  user-select: none;            /* Prevent text selection during scratch */
  -webkit-user-select: none;
}

/* --- Typography scale --- */
h1 { font-family: var(--font-display); font-weight: 600; font-size: 2rem;    letter-spacing: 0.04em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;  letter-spacing: 0.04em; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
p  { line-height: 1.5; }

/* --- Utility classes --- */

/* Gold glow text */
.text-gold {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold-glow), 0 0 20px rgba(245,166,35,0.3);
}
/* Teal glow text */
.text-teal {
  color: var(--teal-light);
  text-shadow: 0 0 8px var(--teal-glow);
}
/* Crimson glow text */
.text-crimson {
  color: var(--crimson-light);
  text-shadow: 0 0 8px var(--crimson-glow);
}
/* Monospace number style */
.font-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.text-center { text-align: center; }

/* Screen-reader-only helper for accessibility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}