:root {
    /* Colors - Default Theme (Cute/Pink-ish base) */
    --primary-color: #6200ea;
    --secondary-color: #00bfa5;
    --bg-color: #fce4ec;
    --text-color: #2c3e50;
    --grid-bg: #ffffff;
    --grid-border: #ddd;
    --cell-size: 40px;

    /* Widget Colors */
    --widget-bg: rgba(255, 255, 255, 0.7);

    /* Component Colors */
    --legend-bg: #ffffff;
    --legend-item-bg: #fafafa;
    --key-bg: #ffffff;
    --key-text: #2c3e50;
    --key-shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="blue"] {
    --bg-color: #e3f2fd;
    --primary-color: #1565c0;
    --secondary-color: #00acc1;
}

[data-theme="earth"] {
    --bg-color: #efebe9;
    --primary-color: #5d4037;
    --secondary-color: #689f38;
}

[data-dark-mode="true"] {
    --bg-color: #1a1a1a;
    /* Lighter than #121212 */
    --text-color: #f5f5f5;
    /* Brighter white */
    --grid-bg: #2d2d2d;
    /* Lighter grid bg */
    --grid-border: #444;
    /* Visible border */
    --widget-bg: rgba(255, 255, 255, 0.15);

    /* Dark Mode Components */
    --legend-bg: #2d2d2d;
    --legend-item-bg: #3d3d3d;
    /* Distinct from container */
    --key-bg: #444444;
    --key-text: #ffffff;
    --key-shadow: rgba(0, 0, 0, 0.5);

    /* Brighter colors for dark mode */
    --primary-color: #bb86fc;
    --secondary-color: #03dac6;

    /* Override for solved items in dark mode? Handled in CSS via opacity but check contrast */
}