/**
 * ============================================
 * MSI STUDIO DESIGN SYSTEM - DESIGN TOKENS
 * ============================================
 *
 * Este archivo centraliza todos los design tokens del sistema.
 * Los tokens son las variables fundamentales que definen:
 * - Colores (paleta de marca, neutrales, estados)
 * - Tipografía (familias, tamaños, pesos, line-heights)
 * - Espaciado (márgenes, paddings, border-radius)
 * - Elevación (sombras y profundidad)
 * - Breakpoints (responsive design)
 *
 * Los módulos fundamentales se cargan directamente desde _Layout.cshtml
 * antes de este archivo, para que cada recurso tenga su propia versión
 * de caché y las variables CSS estén disponibles.
 *
 * @version 1.0.0
 * @author MSI Studio
 */

/* Módulos previos del layout: colors, tipografia, spacing y gaia-foundations. */

:root {
   /* ============================================
     ELEVATION - Sistema de sombras (5 niveles)
     ============================================
     Sistema de elevación basado en Material Design.
     Usa estos niveles para crear jerarquía visual.
     ============================================ */

   /* Elevation 0 - Sin sombra
      Uso: Elementos planos, fondos base */
   --shadow-0: none;
   --elevation-0: var(--shadow-0);

   /* Elevation 1 - Sombra muy sutil (0-1px)
      Uso: Cards básicas, inputs, elementos hover */
   --shadow-1: 0 var(--spacing-1) var(--spacing-2) 0 rgb(0 0 0 / 0.05);
   --elevation-1: var(--shadow-1);

   /* Elevation 2 - Sombra pequeña (1-2px)
      Uso: Botones, chips, elementos interactivos */
   --shadow-2: 0 var(--spacing-2) var(--spacing-4) 0 rgb(0 0 0 / 0.08), 0 var(--spacing-1) var(--spacing-2) 0 rgb(0 0 0 / 0.04);
   --elevation-2: var(--shadow-2);

   /* Elevation 3 - Sombra media (2-4px)
      Uso: Dropdowns, popovers, navegación */
   --shadow-3: 0 var(--spacing-4) var(--spacing-8) 0 rgb(0 0 0 / 0.1), 0 var(--spacing-2) var(--spacing-4) 0 rgb(0 0 0 / 0.06);
   --elevation-3: var(--shadow-3);

   /* Elevation 4 - Sombra pronunciada (4-8px)
      Uso: Modales, sidebars flotantes */
   --shadow-4: 0 var(--spacing-8) var(--spacing-16) 0 rgb(0 0 0 / 0.12), 0 var(--spacing-4) var(--spacing-8) 0 rgb(0 0 0 / 0.08);
   --elevation-4: var(--shadow-4);

   /* Elevation 5 - Sombra máxima (8-16px)
      Uso: Elementos máxima prioridad, overlays críticos */
   --shadow-5: 0 var(--spacing-16) var(--spacing-32) 0 rgb(0 0 0 / 0.15), 0 var(--spacing-8) var(--spacing-16) 0 rgb(0 0 0 / 0.1);
   --elevation-5: var(--shadow-5);

   /* ============================================
     SHADOW ALIASES - Nombres semánticos
     ============================================ */
   --shadow-sm: var(--shadow-1);   /* Pequeña: elementos sutiles */
   --shadow-md: var(--shadow-2);   /* Media: componentes estándar */
   --shadow-lg: var(--shadow-3);   /* Grande: menús, dropdowns */
   --shadow-xl: var(--shadow-4);   /* Extra grande: modales */
   --shadow-2xl: var(--shadow-5);  /* Máxima: overlays importantes */

   /* ============================================
     FOCUS SHADOWS - Estados de foco
     ============================================ */
   --shadow-focus-light: 0 0 0 var(--spacing-4) rgb(15 23 42 / 0.08);  /* Foco claro */
   --shadow-focus-dark: 0 0 0 var(--spacing-4) rgb(15 23 42 / 0.3);    /* Foco oscuro */

   /* ============================================
     BREAKPOINTS - Responsive Design
     ============================================ */

   /* Mobile First Breakpoints */
   --breakpoint-mobile: 23.4375rem;
   /* 375px - Mobile - 4 columns */
   --breakpoint-tablet: 48rem;
   /* 768px - Tablet - 6 columns */
   --breakpoint-desktop: 90rem;
   /* 1440px - Desktop - 12 columns */

   /* Grid Configuration - Mobile (375px) */
   --grid-mobile-columns: 4;
   --grid-mobile-margin: 1rem;
   /* 16px */
   --grid-mobile-gutter: 0.75rem;
   /* 12px */

   /* Grid Configuration - Tablet (768px) */
   --grid-tablet-columns: 6;
   --grid-tablet-margin: 2rem;
   /* 32px */
   --grid-tablet-gutter: 1.25rem;
   /* 20px */

   /* Grid Configuration - Desktop (1440px) */
   --grid-desktop-columns: 12;
   --grid-desktop-margin: 10rem;
   /* 160px */
   --grid-desktop-gutter: 1.5rem;
   /* 24px */

   /* Container Max Widths */
   --container-mobile: 100%;
   /* Responsive */
   --container-tablet: 48rem;
   /* 768px */
   --container-desktop: 90rem;
   /* 1440px */
   --container-max: 90rem;
   /* 1440px */

   /* Motion */
   --motion-page-exit-duration: 90ms;
   --motion-page-enter-duration: 180ms;
   --motion-page-enter-distance: 0.375rem;
   --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
   --motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
}