/**
 * tokens.css — Sistema de diseño CRM CAPROIN
 * Design tokens: fuente única de verdad para colores, tipografía, espaciado y sombras.
 * Importar PRIMERO en todo archivo CSS del proyecto: @import './tokens.css';
 * NO hardcodear valores de color, espaciado o tipografía fuera de este archivo.
 */

:root {

  /* ================================================================
     PALETA DE COLORES — TEMA EJECUTIVO OSCURO (modo único)
     ================================================================ */

  /* --- Primario: Azul — acción, enfoque, interactividad --- */
  --color-primary:         #3B82F6;
  --color-primary-hover:   #2563EB;
  --color-primary-active:  #1D4ED8;
  --color-primary-light:   rgba(59, 130, 246, 0.15);
  --color-primary-dark:    #1E40AF;
  --color-primary-text:    #93C5FD;

  /* --- Secundario: Violeta — etiquetas, categorías, CRM --- */
  --color-secondary:       #8B5CF6;
  --color-secondary-hover: #7C3AED;
  --color-secondary-light: rgba(139, 92, 246, 0.15);
  --color-secondary-text:  #C4B5FD;

  /* --- Acento: Cian — highlights, iconos de estado, badges activos --- */
  --color-accent:          #06B6D4;
  --color-accent-hover:    #0891B2;
  --color-accent-light:    rgba(6, 182, 212, 0.15);
  --color-accent-text:     #67E8F9;

  /* --- Estados de sistema --- */
  /* Éxito */
  --color-success:         #10B981;
  --color-success-bg:      rgba(16, 185, 129, 0.12);
  --color-success-border:  rgba(16, 185, 129, 0.3);
  --color-success-text:    #34D399;

  /* Advertencia */
  --color-warning:         #F59E0B;
  --color-warning-bg:      rgba(245, 158, 11, 0.12);
  --color-warning-border:  rgba(245, 158, 11, 0.3);
  --color-warning-text:    #FCD34D;

  /* Error */
  --color-error:           #EF4444;
  --color-error-bg:        rgba(239, 68, 68, 0.12);
  --color-error-border:    rgba(239, 68, 68, 0.3);
  --color-error-text:      #F87171;

  /* Info */
  --color-info:            #3B82F6;
  --color-info-bg:         rgba(59, 130, 246, 0.12);
  --color-info-border:     rgba(59, 130, 246, 0.3);
  --color-info-text:       #93C5FD;

  /* --- Superficies (fondos) — Tema Moderno dark (slate) --- */
  --surface-0:             #0F172A;   /* fondo body — slate-900 */
  --surface-sidebar:       #111827;   /* sidebar — más oscuro para jerarquía */
  --surface-1:             #1E293B;   /* tarjetas (cards) — slate-800 */
  --surface-2:             #243748;   /* modales, drawers */
  --surface-3:             #334155;   /* hover de filas, estados activos — slate-700 */
  --surface-4:             #475569;   /* selección, foco de ítem — slate-600 */
  --surface-overlay:       rgba(0, 0, 0, 0.65);  /* overlays */

  /* --- Bordes — sólidos slate para claridad visual --- */
  --border-subtle:         #1E293B;   /* slate-800 */
  --border-default:        #334155;   /* slate-700 */
  --border-strong:         #475569;   /* slate-600 */
  --border-focus:          #3B82F6;
  --border-error:          #EF4444;

  /* --- Texto — slate claros para máxima legibilidad --- */
  --text-primary:          #F1F5F9;   /* títulos, texto principal — slate-100 */
  --text-secondary:        #CBD5E1;   /* subtítulos, labels — slate-300 */
  --text-muted:            #94A3B8;   /* texto de apoyo, placeholders — slate-400 */
  --text-disabled:         #475569;   /* elementos deshabilitados */
  --text-inverse:          #0F172A;   /* texto sobre fondos claros */
  --text-link:             #60A5FA;
  --text-link-hover:       #93C5FD;

  /* ================================================================
     TIPOGRAFÍA
     ================================================================ */

  --font-primary:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica */
  --text-display-2xl: 4.5rem;    /* 72px — pantallas hero, no usar en CRM */
  --text-display-xl:  3.75rem;   /* 60px — títulos de página muy grandes */
  --text-display-lg:  3rem;      /* 48px — dashboard hero numbers */
  --text-display-md:  2.25rem;   /* 36px — KPI stats grandes */
  --text-display-sm:  1.875rem;  /* 30px — KPIs secundarios */
  --text-xl:          1.25rem;   /* 20px — títulos de sección */
  --text-lg:          1.125rem;  /* 18px — subtítulos prominentes */
  --text-md:          1rem;      /* 16px — cuerpo principal */
  --text-sm:          0.875rem;  /* 14px — labels, datos de tabla */
  --text-xs:          0.75rem;   /* 12px — metadata, badges, captions */
  --text-2xs:         0.625rem;  /* 10px — texto ultra-pequeño (usar con moderación) */

  /* Pesos */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Interlineado */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Tracking (letter-spacing) */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ================================================================
     ESPACIADO — Base 4px
     ================================================================ */

  --space-0:   0px;
  --space-px:  1px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ================================================================
     RADIOS DE BORDE
     ================================================================ */

  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ================================================================
     SOMBRAS
     ================================================================ */

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
  --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);

  /* Sombras de brillo (glow) para elementos interactivos */
  --shadow-glow-primary:   0 0 20px rgba(59, 130, 246, 0.25);
  --shadow-glow-success:   0 0 20px rgba(16, 185, 129, 0.25);
  --shadow-glow-error:     0 0 20px rgba(239, 68, 68, 0.25);
  --shadow-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.25);

  /* ================================================================
     TRANSICIONES
     ================================================================ */

  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   250ms ease;
  --transition-slower: 400ms ease;

  /* ================================================================
     GRID Y LAYOUT
     ================================================================ */

  --sidebar-width:      240px;
  --sidebar-width-sm:   64px;   /* colapsado */
  --topbar-height:      56px;
  --content-max-width:  1400px;
  --content-padding:    var(--space-6);  /* 24px */

  /* Breakpoints (referencia — usar en media queries) */
  /* --bp-sm:  640px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */
  /* --bp-2xl: 1536px */

  /* ================================================================
     Z-INDEX
     ================================================================ */

  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-toast:     400;
  --z-tooltip:   500;

  /* ================================================================
     COMPONENTES — valores específicos
     ================================================================ */

  /* Botones */
  --btn-height-sm:  32px;
  --btn-height-md:  40px;
  --btn-height-lg:  48px;
  --btn-padding-sm: var(--space-1) var(--space-3);    /* 4px 12px */
  --btn-padding-md: var(--space-2) var(--space-4);    /* 8px 16px */
  --btn-padding-lg: var(--space-3) var(--space-6);    /* 12px 24px */

  /* Inputs */
  --input-height:   40px;
  --input-padding:  var(--space-2) var(--space-3);    /* 8px 12px */
  --input-bg:       var(--surface-2);
  --input-border:   var(--border-default);
  --input-radius:   var(--radius-md);

  /* Tabla */
  --table-row-height:   44px;
  --table-header-bg:    var(--surface-2);
  --table-row-hover:    var(--surface-3);
  --table-row-selected: var(--surface-4);

  /* Card */
  --card-padding:   var(--space-4) var(--space-5);    /* 16px 20px */
  --card-radius:    var(--radius-lg);                  /* 12px */
  --card-border:    var(--border-default);
  --card-bg:        var(--surface-1);
  --card-shadow:    var(--shadow-md);

  /* Modal */
  --modal-padding:  var(--space-6);                    /* 24px */
  --modal-radius:   var(--radius-xl);                  /* 16px */
  --modal-bg:       var(--surface-2);
  --modal-shadow:   var(--shadow-xl);

  /* Badge */
  --badge-padding:  2px var(--space-2);               /* 2px 8px */
  --badge-radius:   var(--radius-sm);                  /* 4px */
  --badge-font:     var(--text-xs);
  --badge-weight:   var(--font-medium);

  /* Avatar */
  --avatar-sm:   24px;
  --avatar-md:   32px;
  --avatar-lg:   40px;
  --avatar-xl:   56px;

  /* Iconos (tamaños estándar Lucide) */
  --icon-sm:  16px;
  --icon-md:  20px;
  --icon-lg:  24px;

}