/* ===========================================================
   🎨 DOLITZI UI — CORE SYSTEM
   ===========================================================
   Estructura modular profesional basada en capas:
   1️⃣ Tokens globales (variables)
   2️⃣ Utilidades (spacing, radius, shadow, color)
   3️⃣ Layouts (grid, flex, box)
   4️⃣ Componentes (buttons, cards, alerts, forms, avatar, progressbar)
   =========================================================== */

/* -----------------------------------------------------------
   1️⃣ TOKENS GLOBALES — variables base del sistema
   ----------------------------------------------------------- */
@import "tokens/var.css";          /* Colores, tipografía, tamaños base */
@import "tokens/tokens-colors.css";          /* Colores, tipografía, tamaños base */
@import "tokens/tokens-typography.css";
@import "tokens/tokens-tokens-body.css";
@import "tokens/breakpoints.css";


/* -----------------------------------------------------------
   2️⃣ UTILIDADES UNIVERSALES — helpers atómicos
   ----------------------------------------------------------- */
@import "utilities/colors.css";    /* bg-, tx-, bd-, color- */
@import "utilities/spacing.css";   /* p-, m-, px-, py-, etc. */
@import "utilities/radius.css";    /* radius-, radius-tl, etc. */
@import "utilities/shadow.css";    /* sha-sm, sha-lg, sha-hover */
@import "utilities/flex.css";      /* flex, align, justify, gap */
@import "utilities/grid.css";      /* grid, grid-fit, grid-auto */
@import "utilities/borders.css";
@import "utilities/backgrounds.css";
@import "utilities/sizing.css";
@import "utilities/typography.css";
/* -----------------------------------------------------------
   3️⃣ ESTRUCTURA BASE — layout y contenedores
   ----------------------------------------------------------- */
@import "components/box.css";      /* .box base con background y border */

/* -----------------------------------------------------------
   4️⃣ COMPONENTES DE INTERFAZ — UI Elements
   ----------------------------------------------------------- */
@import "components/buttons.css";  /* Botones primarios, secundarios, etc. */
@import "components/cards.css";    /* Tarjetas informativas */
@import "components/forms.css";    /* Formularios, inputs, labels */
@import "components/alerts.css";   /* Alertas y notificaciones */
@import "components/avatar.css";   /* Avatares circulares o cuadrados */
@import "components/progressbar.css"; 
@import "components/navbar.css"; 
@import "components/badge.css"; 

/* -----------------------------------------------------------
   breakpoints
   ----------------------------------------------------------- */
@import "breakpoints/breakpoints.css";

/* -----------------------------------------------------------
   layout
   ----------------------------------------------------------- */
   @import "layout/layout.css";