/* ===================================================== */
/* CUPISSA — VARIABLES GLOBALES*/
/* MODO OSCURO POR DEFECTO */
/* ===================================================== */

:root {

/* ========================= */
/* COLORES PRINCIPALES */
/* ========================= */

--color-black: #000000;
--color-white: #ffffff;
--color-pink: #db137a;

/* Escalas neutras */

--color-gray-light: #f5f5f5;
--color-gray-medium: #cccccc;
--color-gray-dark: #333333;

/* ========================= */
/* FONDO PRINCIPAL (OSCURO DEFAULT) */
/* ========================= */

--bg-primary: #000000;
--bg-secondary: #111111;
--bg-card: #1a1a1a;

--text-primary: #ffffff;
--text-secondary: #cccccc;

--border-color: rgba(255,255,255,0.08);

/* ========================= */
/* SOMBRAS */
/* ========================= */

--shadow-soft: 0 4px 20px rgba(0,0,0,0.5);
--shadow-hover: 0 8px 30px rgba(0,0,0,0.7);

/* ========================= */
/* BORDES */
/* ========================= */

--radius-small: 6px;
--radius-medium: 12px;
--radius-large: 20px;

/* ========================= */
/* TRANSICIONES */
/* ========================= */

--transition-fast: 0.2s ease;
--transition-medium: 0.3s ease;
--transition-slow: 0.5s ease;

/* ========================= */
/* HEADER */
/* ========================= */

--header-height: 80px;
--mundos-height: 60px;

}

/* ===================================================== */
/* MODO CLARO (OPCIONAL) */
/* ===================================================== */

body.light-mode {

--bg-primary: #ffffff;
--bg-secondary: #f5f5f5;
--bg-card: #ffffff;

--text-primary: #000000;
--text-secondary: #333333;

--border-color: rgba(0,0,0,0.08);

}