/**
 * css/main.css
 * ----------------------------------------------------------------------
 * Punto de entrada único de estilos. Define el ORDEN de la cascada:
 *
 *   1. base/variables → tokens estructurales (no dependen del tema).
 *   2. themes/*        → tokens de color por tema (claro y oscuro).
 *   3. base/reset       → normalización del navegador.
 *   4. base/typography  → estilos tipográficos base.
 *   5. base/utilities   → utilidades de layout de bajo nivel.
 *   6. components/*     → estilos de los sistemas (botones, nav, diálogos...).
 *
 * Los dos temas se cargan siempre juntos: la variable que decide cuál se
 * aplica es el atributo `data-theme` en <html>, gestionado por
 * js/modules/theme.js, no la carga condicional de CSS. Esto permite
 * alternar de tema instantáneamente sin volver a pedir ningún archivo.
 *
 * index.html enlaza únicamente este archivo; ningún otro CSS se importa
 * por separado desde el HTML.
 * ---------------------------------------------------------------------- */

@import url('./base/variables.css');
@import url('./themes/light.css');
@import url('./themes/dark.css');

@import url('./base/reset.css');
@import url('./base/typography.css');
@import url('./base/utilities.css');

@import url('./components/buttons.css');
@import url('./components/navigation.css');
@import url('./components/notifications.css');
@import url('./components/dialogs.css');
@import url('./components/loading.css');

/* Añadidos en la fase de construcción de las pantallas base (Inicio,
   Mis Viajes, Crear Recuerdo, Viaje, Ajustes). Mismos tokens, mismo
   patrón de archivo por componente que los cinco anteriores. */
@import url('./components/page.css');
@import url('./components/hero.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/gallery.css');
@import url('./components/settings-list.css');
@import url('./components/scan.css');
@import url('./components/diagnostics.css');