/* variables.css — design tokens for Brain Games Hub.
   Aligned with the Real World IQ brand so the Hub reads as part of the same
   family. LOCKED: all numeric scores render in --score-color (black, #000). */

:root {
  /* Brand */
  --bg-navy: #0b1f3a;
  --bg-navy-2: #12294b;
  --bg-blue: #2563eb;
  --bg-blue-dark: #1d4ed8;
  --bg-accent: #f5a623;     /* Real World IQ gold accent */
  --bg-accent-dark: #d4881a;

  /* Surfaces */
  --bg-page: #f6f8fc;
  --bg-card: #ffffff;
  --bg-card-alt: #f0f4fa;
  --bg-border: #d8e0ec;

  /* Text */
  --bg-text: #16243a;
  --bg-text-muted: #5a6b85;
  --bg-text-invert: #ffffff;

  /* LOCKED: scores are always black, never colored. */
  --score-color: #000000;

  /* Region colors (mirror js/engine/regions.js) */
  --region-frontal: #2563eb;
  --region-parietal: #0891b2;
  --region-temporal: #7c3aed;
  --region-occipital: #16a34a;
  --region-limbic: #db2777;
  --region-cerebellum: #ea580c;

  /* Feedback */
  --ok: #16a34a;
  --bad: #dc2626;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;

  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Radius & shadow */
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(11, 31, 58, 0.08);
  --shadow-md: 0 6px 20px rgba(11, 31, 58, 0.12);
  --shadow-lg: 0 16px 40px rgba(11, 31, 58, 0.18);

  --maxw: 1140px;
}

/* The score utility — every numeric score MUST use this class (locked black). */
.score, .bg-score, [data-role="score"], .region-row .val, .result-card .big {
  color: var(--score-color);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}