/* ===== Tokens ===== */

:root{
	/* Colores Base */
	--red:#d70000;
	--ink:#f5f2f2;
	--muted:#000000;
    --red-rgb: 215, 0, 0; /* Añadido para overlays */

	/* Fondos y Superficies */
	--bg:#ffffff;
	--section-bg:#F9FAFB;
	--card-bg:#F7F7F9;

	/* Tipografía */
	--text-primary:#111111;
	--text-secondary:#000000;

	/* Otros */
	--radius:16px;
	--shadow:0 10px 30px rgba(63, 63, 63, 0.08);
}

/* ----------------------------------------------------
 * 1. Dark Mode Variables (SÓLO se redefinen aquí)
 * ----------------------------------------------------
 */
body.dark-mode {
    --red: #d70000; /* Rojo más claro para contraste en oscuro */
    --muted: #030303;
    --red-rgb: 255, 59, 59; /* Añadido para overlays en oscuro */

    --bg: #121212; /* Fondo principal oscuro */
    --section-bg: #121212; /* Fondo de secciones oscuro */
    --card-bg: #2b2b2b; /* Fondo de tarjetas oscuro */

    --text-primary: #ffffff; /* Texto principal blanco */
    --text-secondary: #dcdcdc; /* Texto secundario claro */
    
    --shadow: 0 10px 30px rgba(0,0,0,.4); /* Sombra más fuerte */
}

*{box-sizing:border-box}
html,body{
	margin:0; 
	padding:0; 
	background: var(--bg); /* Usa variable */
	color: var(--text-primary); /* Usa variable */
	font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
	font-size:16.5px; 
	line-height:1.6;
}
html{ scroll-behavior:smooth; }
section{ scroll-margin-top: 84px; }
.container{max-width:1270px;margin:0 auto;padding:0 20px}