/* ============================================================
   Country Guess — light theme
   Loaded AFTER styles.css. Converts the dark slate theme to the
   light theme by remapping the app's --cg-* tokens.
   ============================================================ */

:root {
  --cg-bg: #fbfcf8;
  --cg-surface: #ffffff;
  --cg-surface-2: #f0f6f5;
  --cg-text: #121722;
  --cg-text-dim: #5e6b7d;
  --cg-accent: #0f766e;
  --cg-accent-2: #2457c5;
  --cg-warn: #b7791f;
  --cg-danger: #b42318;
  --cg-map-default: #dbe3ea;
  --cg-map-default-stroke: #94a3b8;
  --cg-map-guessed: #0f766e;
  --cg-map-missed: #b42318;
  --cg-map-pulse: #b7791f;
  --cg-map-hint: #2457c5;
  --cg-ocean: #dce8f1;
  --cg-shadow: 0 18px 45px rgba(18, 23, 34, 0.12);
}

/* Lighten the Tailwind dark utilities used in the markup/JS. */
.bg-gray-800 { background-color: var(--cg-surface) !important; }
.bg-gray-900 { background-color: var(--cg-surface-2) !important; }
.bg-gray-700 { background-color: var(--cg-surface-2) !important; }
.text-gray-400, .text-gray-500 { color: var(--cg-text-dim) !important; }
.text-green-400 { color: var(--cg-accent) !important; }
.text-blue-400 { color: var(--cg-accent-2) !important; }
.text-red-400 { color: var(--cg-danger) !important; }

/* Plain text-white on now-light surfaces becomes ink, but keep white
   text on elements that still have a solid accent background. */
.text-white { color: var(--cg-text) !important; }
.bg-green-500.text-white,
.bg-emerald-500.text-white,
.bg-blue-600.text-white,
[class*="bg-green-"].text-white,
[class*="bg-blue-"].text-white { color: #ffffff !important; }

/* Give the main panel a defined edge on the light page. */
#game-container {
  border: 1px solid var(--cg-text-dim);
  border-color: #dbe3ea;
}