/**
 * primitives.css — Capa 1: Escala de valores brutos.
 *
 * Contiene valores absolutos sin semántica de rol.
 * Nunca deben usarse directamente en componentes; sólo como
 * fuente de referencia para semantic.css y components.css.
 *
 * Convención de nomenclatura:
 *   --color-{paleta}-{intensidad}   (0 = más claro, 950 = más oscuro)
 *   --font-size-{t-shirt}
 *   --font-weight-{nombre}
 *   --space-{n}                     (n en múltiplos de 4 px)
 *   --radius-{nombre}
 *   --shadow-{nombre}
 *   --duration-{nombre}
 */

:root {
  /* ── Paleta Blue ─────────────────────────────────────────────── */
  --color-blue-50:  #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;
  --color-blue-950: #172554;

  /* ── Paleta Red ──────────────────────────────────────────────── */
  --color-red-50:  #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;
  --color-red-950: #450A0A;

  /* ── Paleta Green ────────────────────────────────────────────── */
  --color-green-50:  #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;
  --color-green-950: #052E16;

  /* ── Paleta Amber ────────────────────────────────────────────── */
  --color-amber-50:  #FFFBEB;
  --color-amber-100: #FEF3C7;
  --color-amber-200: #FDE68A;
  --color-amber-300: #FCD34D;
  --color-amber-400: #FBBF24;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;
  --color-amber-700: #B45309;
  --color-amber-800: #92400E;
  --color-amber-900: #78350F;
  --color-amber-950: #451A03;

  /* ── Paleta Slate ────────────────────────────────────────────── */
  --color-slate-0:   #FFFFFF;
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-850: #172032;
  --color-slate-900: #0F172A;
  --color-slate-950: #020617;

  /* ── Colores neutros absolutos ───────────────────────────────── */
  --color-slate-atajo:    #172B4D; /* legacy text-primary light — complementa slate-900 */
  --color-slate-sub:      #5E6C84; /* legacy text-secondary light */
  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-transparent:    transparent;

  /* ── Tipografía — Tamaños ────────────────────────────────────── */
  --font-size-2xs: 0.625rem;   /*  10px */
  --font-size-xs:  0.75rem;    /*  12px */
  --font-size-sm:  0.875rem;   /*  14px */
  --font-size-base: 1rem;      /*  16px */
  --font-size-lg:  1.125rem;   /*  18px */
  --font-size-xl:  1.25rem;    /*  20px */
  --font-size-2xl: 1.5rem;     /*  24px */
  --font-size-3xl: 1.875rem;   /*  30px */

  /* ── Tipografía — Pesos ──────────────────────────────────────── */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Tipografía — Altura de línea ────────────────────────────── */
  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ── Espaciado (base 4 px) ───────────────────────────────────── */
  --space-0:  0px;
  --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;

  /* ── Radios de borde ─────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-sm-dark: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-md-dark: 0 4px 6px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.16);

  /* ── Transiciones / Duraciones ───────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-modal:   200;
  --z-overlay: 300;
  --z-toast:   400;
}