/**
* SISTEMA DE DISEÑO SERGIO FORÉS - ARQUITECTURA MODULAR CON @LAYER
*
* @layer controla la especificidad independientemente del orden del selector.
* Las capas declaradas primero tienen MENOR prioridad — utilities siempre gana,
* tokens siempre pierde. Esto elimina las guerras de especificidad por completo.
*
* Módulos del sistema:
*
* 1. tokens.css → layer(tokens) - Variables núcleo (colores, espaciado, tipografía)
* 2. typography.css → layer(base) - Universal reset + sistema tipográfico (4 base + display)
* 3. layout.css → layer(layout) - Grids, containers y layout system (sin :root — vars en tokens)
* 4. components.css → layer(components) - Componentes UI reutilizables (sin :root — vars en tokens)
* 5. utilities.css → layer(utilities) - Helpers, showcase demos y clases utilitarias
*/
/* ==========================================================================
DECLARACIÓN DE CAPAS — orden de menor a mayor prioridad
========================================================================== */
@layer tokens, base, layout, components, utilities;
/* ==========================================================================
1. DESIGN TOKENS — layer(tokens)
Variables CSS fundamentales del sistema
========================================================================== */
@import url('./tokens.css?v=31') layer(tokens);
/* ==========================================================================
2. TIPOGRAFÍA + RESET — layer(base)
Universal reset + sistema tipográfico basado en proporciones áureas
========================================================================== */
@import url('./typography.css?v=31') layer(base);
/* ==========================================================================
3. LAYOUT Y GRIDS — layer(layout)
Grid system, containers y responsive design
========================================================================== */
@import url('./layout.css?v=31') layer(layout);
/* ==========================================================================
4. COMPONENTES — layer(components)
Botones, cards, navegación y formularios
========================================================================== */
@import url('./components.css?v=31') layer(components);
/* ==========================================================================
5. UTILIDADES — layer(utilities)
Espaciado, colores, features y showcase
========================================================================== */
@import url('./utilities.css?v=31') layer(utilities);
/**
* ==========================================================================
* NOTES DE IMPLEMENTACIÓN
* ==========================================================================
*
* CÓMO USAR ESTE SISTEMA MODULAR:
*
* 1. IMPORTACIÓN COMPLETA:
*
*
* 2. IMPORTACIÓN SELECTIVA:
*
*
*
*
* 3. PROYECTOS ESPECÍFICOS:
* - Siempre importar tokens.css primero
* - Añadir solo los módulos necesarios
* - Crear archivo proyecto-específico.css para extensiones
*
* VENTAJAS DE LA MODULARIZACIÓN CON @LAYER:
* - ✅ Mantenimiento más sencillo
* - ✅ Debugging específico por área
* - ✅ Carga selectiva según necesidades
* - ✅ Colaboración en equipo por módulos
* - ✅ Testing independiente de cada área
* - ✅ Versionado granular
* - ✅ Especificidad controlada por capa — no por orden de selector
* - ✅ Sin guerras de especificidad entre módulos
* - ✅ Estilos fuera de @layer siempre ganan sobre cualquier capa
*
* ESTRUCTURA ATÓMICA MANTENIDA:
* - tokens.css = Núcleo atómico inmutable (layer de menor prioridad)
* - utilities.css = Capa de mayor prioridad — sus helpers no se sobreescriben
* - Sin duplicación de variables
* - Consistencia sistémica garantizada
*
* SOBRE @LAYER:
* La declaración `@layer tokens, base, layout, components, utilities` fija
* el orden de prioridad una sola vez. Cualquier regla en `utilities` supera
* a cualquier regla en `components`, independientemente de la especificidad
* del selector. Los estilos escritos fuera de cualquier @layer (overrides
* de proyecto) tienen prioridad máxima sobre todas las capas.
*/