/* ═══════════════════════════════════════════════════════════
   FRAMEWORK WEB DT v1.0 — Design Tokens
   Delanoys Tecnologías · Sistema de Diseño
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ═══════════════════════════════════════════════════════
       COLORES — Basados en el diseño original
       ═══════════════════════════════════════════════════════ */
    
    /* Primarios — Azul Delanoys (del diseño original) */
    --dt-color-primary-50:  #eff6ff;
    --dt-color-primary-100: #dbeafe;
    --dt-color-primary-200: #bfdbfe;
    --dt-color-primary-300: #93c5fd;
    --dt-color-primary-400: #60a5fa;
    --dt-color-primary-500: #3b82f6;
    --dt-color-primary-600: #2563eb;  /* Color principal original */
    --dt-color-primary-700: #1d4ed8;
    --dt-color-primary-800: #1e40af;
    --dt-color-primary-900: #1e3a8a;
    
    /* Secundarios — Naranja (badges originales) */
    --dt-color-secondary-500: #f97316;
    --dt-color-secondary-600: #ea580c;
    --dt-color-secondary-700: #c2410c;
    
    /* Semánticos — Estados */
    --dt-color-success: #16a34a;
    --dt-color-warning: #f59e0b;
    --dt-color-danger:  #dc2626;
    --dt-color-info:    #0891b2;
    
    /* Neutros — Modo Claro (default) */
    --dt-color-bg:          #ffffff;
    --dt-color-bg-alt:      #f8fafc;
    --dt-color-bg-elevated: #ffffff;
    --dt-color-surface:     #f1f5f9;
    --dt-color-border:      #e2e8f0;
    --dt-color-text:        #1e293b;
    --dt-color-text-muted:  #64748b;
    --dt-color-text-subtle: #94a3b8;
    
    /* ═══════════════════════════════════════════════════════
       TIPOGRAFÍA
       ═══════════════════════════════════════════════════════ */
    
    --dt-font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --dt-font-mono: 'Courier New', Courier, monospace;
    
    --dt-text-xs:   0.75rem;
    --dt-text-sm:   0.875rem;
    --dt-text-base: 1rem;
    --dt-text-lg:   1.125rem;
    --dt-text-xl:   1.25rem;
    --dt-text-2xl:  1.5rem;
    --dt-text-3xl:  1.875rem;
    --dt-text-4xl:  2.25rem;
    --dt-text-5xl:  3rem;
    
    --dt-leading-tight:  1.25;
    --dt-leading-normal: 1.6;
    --dt-leading-relaxed:1.75;
    
    --dt-font-normal:   400;
    --dt-font-medium:   500;
    --dt-font-semibold: 600;
    --dt-font-bold:     700;
    
    /* ═══════════════════════════════════════════════════════
       ESPACIADOS
       ═══════════════════════════════════════════════════════ */
    
    --dt-space-1:  0.25rem;
    --dt-space-2:  0.5rem;
    --dt-space-3:  0.75rem;
    --dt-space-4:  1rem;
    --dt-space-5:  1.25rem;
    --dt-space-6:  1.5rem;
    --dt-space-8:  2rem;
    --dt-space-10: 2.5rem;
    --dt-space-12: 3rem;
    --dt-space-16: 4rem;
    --dt-space-20: 5rem;
    
    /* ═══════════════════════════════════════════════════════
       RADIOS DE BORDE
       ═══════════════════════════════════════════════════════ */
    
    --dt-radius-sm:   0.25rem;
    --dt-radius-md:   0.5rem;
    --dt-radius-lg:   0.75rem;
    --dt-radius-xl:   1rem;
    --dt-radius-2xl:  1.5rem;
    --dt-radius-full: 9999px;
    
    /* ═══════════════════════════════════════════════════════
       SOMBRAS
       ═══════════════════════════════════════════════════════ */
    
    --dt-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
    --dt-shadow-sm:  0 2px 4px rgba(15, 23, 42, 0.06);
    --dt-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
    --dt-shadow-lg:  0 8px 24px rgba(15, 23, 42, 0.10);
    --dt-shadow-xl:  0 16px 40px rgba(15, 23, 42, 0.12);
    
    /* ═══════════════════════════════════════════════════════
       TRANSICIONES
       ═══════════════════════════════════════════════════════ */
    
    --dt-transition-fast:   150ms ease;
    --dt-transition-normal: 250ms ease;
    --dt-transition-slow:   400ms ease;
    
    /* ═══════════════════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════════════════ */
    
    --dt-container-sm:  640px;
    --dt-container-md:  768px;
    --dt-container-lg:  1024px;
    --dt-container-xl:  1280px;
    --dt-container-2xl: 1400px;
    
    --dt-sidebar-width: 280px;
    --dt-header-height: 64px;
    
    /* ═══════════════════════════════════════════════════════
       Z-INDEX
       ═══════════════════════════════════════════════════════ */
    
    --dt-z-dropdown: 100;
    --dt-z-sticky:   200;
    --dt-z-modal:    300;
    --dt-z-toast:    400;
    --dt-z-tooltip:  500;
}