/*!
 =========================================================
 * AtlansLostLegacy - Color Palette
 * Variables CSS personalizadas basadas en el logo
 =========================================================
 
 * Paleta de colores principal inspirada en tonos metálicos,
 * oro, plata y azul gema del logo oficial
 
 =========================================================
*/

:root {
	/* ===== COLORES BASE - METÁLICOS Y OSCUROS ===== */
	--color-black-deep: #050505;              /* Negro profundo - fondos principales */
	--color-brown-metallic: #160707;          /* Rojo negro metálico - fondos secundarios */
	--color-gray-steel: #4d2929;              /* Gris rojo oscuro - bordes y separadores */
	--color-gray-medium: #9a8585;             /* Gris cálido - texto secundario */
	--color-silver-aged: #d5caca;             /* Plata tenue - texto principal */
	--color-silver-bright: #f0e6e6;           /* Plata brillante - texto destacado */
	
	/* ===== COLORES ORO - ACENTOS CÁLIDOS ===== */
	--color-bronze-dark: #4a0909;             /* Rojo oscuro - sombras y profundidad */
	--color-gold-old: #8b1515;                /* Rojo profundo - acentos secundarios */
	--color-gold-light: #e53935;              /* Rojo principal - acentos primarios */
	
	/* ===== COLOR PRINCIPAL - AZUL GEMA ===== */
	--color-blue-gem: #b71c1c;                /* Rojo carmesí - color primario */
	
	/* ===== EFECTOS Y BRILLOS - AZULES ===== */
	--color-blue-electric: #e53935;           /* Rojo intenso - hover y focus */
	--color-blue-neon: #ff5252;               /* Rojo brillante - efectos luminosos */
	--color-blue-sky: #ff8a80;                /* Rojo claro - highlights */
	--color-white-glow: #F8FFFF;              /* Blanco de brillo - reflejos máximos */
	
	/* ===== EFECTOS Y BRILLOS - DORADOS ===== */
	--color-gold-bright: #ff5252;             /* Rojo luminoso - hover */
	--color-gold-intense: #c62828;            /* Rojo intenso - estados activos */
	
	/* ===== VARIABLES SEMÁNTICAS ===== */
	/* Fondos */
	--bg-primary: var(--color-black-deep);
	--bg-secondary: var(--color-brown-metallic);
	--bg-tertiary: #100606;                   /* Intermedio entre negro profundo y rojo */
	--bg-panel: rgba(22, 7, 7, 0.88);         /* Panel con transparencia */
	--bg-panel-hover: rgba(35, 8, 8, 0.96);   /* Panel hover */
	
	/* Texto */
	--text-primary: var(--color-silver-aged);
	--text-secondary: var(--color-gray-medium);
	--text-highlight: var(--color-silver-bright);
	--text-muted: #765d5d;
	
	/* Acentos y enlaces */
	--accent-primary: var(--color-blue-gem);
	--accent-secondary: var(--color-gold-light);
	--accent-hover: var(--color-blue-electric);
	--accent-active: var(--color-blue-neon);
	--accent-electric: var(--color-blue-neon);
	--accent-gold: var(--color-gold-bright);
	--accent-success: var(--color-blue-sky);
	--gold-old: var(--color-gold-old);
	--gold-light: var(--color-gold-light);
	--gold-bright: var(--color-gold-bright);
	--sky: var(--color-blue-sky);
	--neon: var(--color-blue-neon);
	
	/* Enlaces */
	--link-default: var(--color-silver-aged);
	--link-hover: var(--color-gold-light);
	--link-active: var(--color-gold-bright);
	
	/* Bordes */
	--border-primary: var(--color-gray-steel);
	--border-secondary: rgba(87, 79, 75, 0.5);
	--border-accent: var(--color-blue-gem);
	--border-gold: var(--color-gold-old);
	
	/* Sombras */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.55);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.65);
	--shadow-glow-blue: 0 0 10px rgba(183, 28, 28, 0.45);
	--shadow-glow-gold: 0 0 10px rgba(229, 57, 53, 0.4);
	
	/* Efectos de brillo */
	--glow-blue: var(--color-blue-sky);
	--glow-gold: var(--color-gold-bright);
	--glow-white: var(--color-white-glow);
	
	/* Estados */
	--state-success: #4CAF50;
	--state-warning: var(--color-gold-intense);
	--state-error: #F44336;
	--state-info: var(--color-blue-neon);
}

/* ===== TEMA OSCURO (POR DEFECTO) ===== */
body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

/* ===== UTILIDADES DE COLOR ===== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-highlight { color: var(--text-highlight) !important; }
.text-accent { color: var(--accent-primary) !important; }
.text-gold { color: var(--color-gold-light) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-panel { background-color: var(--bg-panel) !important; }

.border-accent { border-color: var(--border-accent) !important; }
.border-gold { border-color: var(--border-gold) !important; }

/* Efectos de brillo */
.glow-blue {
	box-shadow: var(--shadow-glow-blue);
	transition: box-shadow 0.3s ease;
}

.glow-blue:hover {
	box-shadow: 0 0 20px rgba(229, 57, 53, 0.65);
}

.glow-gold {
	box-shadow: var(--shadow-glow-gold);
	transition: box-shadow 0.3s ease;
}

.glow-gold:hover {
	box-shadow: 0 0 20px rgba(255, 82, 82, 0.65);
}