:root {
    /* Tamaño de fuente base para el documento (1rem = 16px) */
    font-size: 16px;
    
    /* Fuente principal del sitio con fuentes de respaldo */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Altura del encabezado fijo */
    --header-height: 5rem;
    
    /* Relleno global para mantener consistencia en los márgenes */
    --padding-global: 1.5rem;

    /* ===== Tema Claro ===== */
    
    /* Color de fondo principal */
    --color-bg: #f6eded;
    
    /* Color de texto principal y secundario */
    --color-text: #222222;
    --color-text-secondary: #918d8d;
    
    /* Colores primarios y variaciones */
    --color-primary: #e63946;         /* Rojo principal */
    --color-primary-light: #f28b82;   /* Versión más clara del primario */
    --color-primary-hover: #d62839;   /* Color al pasar el mouse sobre botones/links */
    
    /* Colores de secciones y bordes */
    --color-section-bg: #d9c3c3;      /* Fondo de secciones */
    --color-section-bg-alt: #dec4c4;  /* Fondo alternativo para secciones */
    --color-section-border: #ddd;     /* Borde sutil para secciones */
    
    /* Sombras */
    --color-shadow: rgba(0, 0, 0, 0.08);         /* Sombra estándar */
    --color-shadow-hover: rgba(230, 57, 70, 0.15); /* Sombra al pasar el mouse */

    /* ===== Tema Oscuro ===== */
    
    /* Colores de fondo para tema oscuro */
    --color-bg-dark: #121212;         /* Fondo oscuro principal */
    --color-text-dark: #f0f0f0;       /* Texto claro sobre fondo oscuro */
    --color-text-secondary-dark: #a0a0a0; /* Texto secundario en modo oscuro */
    
    /* Colores primarios para tema oscuro */
    --color-primary-dark: #ef4444;           /* Rojo más vibrante para modo oscuro */
    --color-primary-hover-dark: #ff5555;     /* Efecto hover en modo oscuro */
    
    /* Colores de secciones para tema oscuro */
    --color-section-bg-dark: #1e1e1e;        /* Fondo de sección oscuro */
    --color-section-bg-alt-dark: #2a2a2a;    /* Fondo alternativo oscuro */
    --color-section-border-dark: #444;       /* Borde más visible en modo oscuro */
    
    /* Sombras para tema oscuro */
    --color-shadow-dark: rgba(0, 0, 0, 0.7);           /* Sombra más intensa */
    --color-shadow-hover-dark: rgba(239, 68, 68, 0.25); /* Sombra hover en modo oscuro */
}

/*
 * Estilos base para el elemento body
 * Aplica estilos globales a toda la página
 */
body {
    /* Elimina márgenes y rellenos predeterminados del navegador */
    margin: 0;
    padding: 0;
    
    /* Establece la fuente definida en las variables CSS */
    font-family: var(--font-family);
    
    /* Aplica colores de fondo y texto del tema claro */
    background-color: var(--color-bg);
    color: var(--color-text);
    
    /* Mejora la legibilidad con un interlineado adecuado */
    line-height: 1.6;
    
    /* Transiciones suaves para cambios de tema */
    transition: background-color 0.3s ease,
                color 0.3s ease;
}

/*
 * Estilos para el modo oscuro
 * Se activa añadiendo la clase 'dark' al elemento body
 */
body.dark {
    /* Sobrescribe los colores con las variables del tema oscuro */
    background-color: var(--color-bg-dark);
    color: var(--color-text-dark);
}