/* Theme Variables */
:root {
    /* Colors - Light Mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f6f7f8;
    --text-primary: #1a1a1b;
    --text-secondary: #787c7e;
    --border-color: #d3d6da;

    /* Tile Colors */
    --tile-bg: #ffffff;
    --tile-border: #d3d6da;
    --tile-text: #1a1a1b;

    /* Key Colors */
    --key-bg: #d3d6da;
    --key-bg-hover: #c3c6ca;
    --key-text: #1a1a1b;

    /* Game State Colors - Paleta Mexicana */
    --correct: #006847;      /* Verde bandera mexicana */
    --present: #FFB81C;      /* Dorado/amarillo mexicano */
    --absent: #8B4513;       /* Café/adobe */

    /* Modal */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);

    /* Accents - Rosa Mexicano */
    --primary-accent: #E4007C;  /* Rosa mexicano */
    --error: #dc3545;
    --success: #006847;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Dark Mode */
[data-theme="dark"] {
    /* Colors - Dark Mode */
    --bg-primary: #121213;
    --bg-secondary: #1a1a1b;
    --text-primary: #d7dadc;
    --text-secondary: #818384;
    --border-color: #3a3a3c;

    /* Tile Colors */
    --tile-bg: #121213;
    --tile-border: #565758;
    --tile-text: #d7dadc;

    /* Key Colors */
    --key-bg: #818384;
    --key-bg-hover: #9a9a9c;
    --key-text: #ffffff;

    /* Game State Colors - Paleta Mexicana Oscura */
    --correct: #00A86B;      /* Verde mexicano más brillante para dark mode */
    --present: #FFB81C;      /* Dorado mexicano */
    --absent: #5C4033;

    /* Modal */
    --modal-bg: #121213;
    --modal-overlay: rgba(0, 0, 0, 0.7);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* Disable transitions during initial load */
.no-transition * {
    transition: none !important;
}