/* ── VARIABLES DE TEMA (MANGO & SUNNY) ── */

:root {
    /* Paleta de colores principal (Códigos hexadecimales) */
    --bg-sunny: #fffcf0;           /* color de fondo global */
    --bg-mango-light: #fff3db;     /* Color interiores de cajas y títulos */
    --mango-primary: #ffaa00;      /* Naranja mango base*/
    --mango-deep: #e67300;         /* Naranja oscuro para textos importantes, bordes y links */
    --sunny-yellow: #ffd000;       /* Amarillo para acentos y gradientes */
    --tropical-green: #5ca904;     /* Verde para los hovers de los links (la hoja del mango!) */
    --text-dark: #4a3319;          /* Marrón oscuro para texto principal en vez de usar negro puro pq es menos agresivo */
    --text-muted: #8c6d46;         /* Marrón más suave para textos secundarios o cursivas */
    --white: #ffffff;              /* Blanco puro para fondos limpios */
    
    /* Estilos temáticos preconfigurados */
    --border-style: 2px dashed var(--mango-deep); /* Bordes discontinuos */
    --glass-bg: rgba(255, 248, 230, 0.24);       /* Fondo color crema con opacidad para el efecto transparente */
    
    /* Tipografías del sitio web */
    
    --font-main: 'VT323', monospace;
    --font-pixel: 'VT323', monospace;
    --font-cursive: 'VT323', monospace;

    /* Variables internas específicas para los botones animados */
    --stone-50: #fafaf9;           /* contorno de brillo del botón */
    --stone-800: #4a3319;          /* relieve rígido del botón */
    --btn-mango-primary: #facc15;  /*  del botón arcade */
}