:root {
    /* Theme: Default (Classic Professional) */
    --bg-color: rgba(245, 246, 250, 1.0);
    --text-color: rgba(47, 54, 64, 1.0);
    --card-bg: rgba(255, 255, 255, 0.9);
    --border-color: rgba(0, 0, 0, 0.1);
    
    --primary: rgba(44, 62, 80, 1.0);
    --primary-hover: rgba(26, 37, 47, 1.0);
    --cell-bg: rgba(255, 255, 255, 1.0);
    --cell-highlight: rgba(238, 247, 255, 1.0);
    --cell-active: rgba(209, 233, 249, 1.0);
    --cell-invalid: rgba(231, 76, 60, 1.0);
    --cell-preloaded-color: rgba(47, 54, 64, 1.0);
    --cell-user-color: rgba(41, 128, 185, 1.0);

    --font-main: 'Outfit', sans-serif;
    
    /* Device / Viewport Spacing */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Force Default Theme for Strategy Tutorials to ensure readability */
.force-default-theme {
    --bg-color: rgba(245, 246, 250, 1.0);
    --text-color: rgba(47, 54, 64, 1.0);
    --card-bg: rgba(255, 255, 255, 1.0);
    --border-color: rgba(0, 0, 0, 0.1);
    --primary: rgba(44, 62, 80, 1.0);
    --primary-hover: rgba(26, 37, 47, 1.0);
    --cell-bg: rgba(255, 255, 255, 1.0);
    --cell-highlight: rgba(238, 247, 255, 1.0);
    --cell-active: rgba(209, 233, 249, 1.0);
    --cell-invalid: rgba(231, 76, 60, 1.0);
    --cell-preloaded-color: rgba(47, 54, 64, 1.0);
    --cell-user-color: rgba(41, 128, 185, 1.0);
    --grid-border-color: rgba(47, 54, 64, 1.0);
    color: var(--text-color);
}

/* Theme: Midnight (Forerunner Inspired) */
.dark-mode {
    --bg-color: rgba(15, 23, 42, 1.0);
    --text-color: rgba(226, 232, 240, 1.0);
    --card-bg: rgba(30, 41, 59, 0.85);
    --border-color: rgba(255, 255, 255, 0.1);
    
    --primary: rgba(56, 189, 248, 1.0);
    --primary-hover: rgba(125, 211, 252, 1.0);
    --cell-bg: rgba(30, 41, 59, 1.0);
    --cell-highlight: rgba(56, 189, 248, 0.2);
    --cell-active: rgba(56, 189, 248, 0.4);
    --cell-invalid: rgba(239, 68, 68, 1.0);
    --cell-preloaded-color: rgba(241, 245, 249, 1.0);
    --cell-user-color: rgba(56, 189, 248, 1.0);
    --grid-border-color: rgba(71, 85, 105, 1.0);
}

/* Theme: Vibrant (Banished Inspired) */
.vibrant {
    --bg-color: rgba(46, 16, 101, 1.0);
    --text-color: rgba(255, 255, 255, 1.0);
    --card-bg: rgba(76, 29, 149, 0.9);
    --border-color: rgba(255, 255, 255, 0.2);
    
    --primary: rgba(244, 63, 94, 1.0);
    --primary-hover: rgba(251, 113, 133, 1.0);
    --cell-bg: rgba(59, 7, 100, 1.0);
    --cell-highlight: rgba(244, 63, 94, 0.3);
    --cell-active: rgba(244, 63, 94, 0.6);
    --cell-invalid: rgba(239, 68, 68, 1.0);
    --cell-preloaded-color: rgba(251, 207, 232, 1.0);
    --cell-user-color: rgba(251, 191, 36, 1.0);
    --grid-border-color: rgba(0, 0, 0, 1.0);
}