/* =====================================================================
   SIcorp · Design tokens v0.1 (provisional) · Arte XV · 7-nov-2026
   Fuentes: Sora (titulares), Inter (interfaz), JetBrains Mono (cifras/código).
   Las tres son Google Fonts (OFL): autoalojar los .woff2 de /fonts.
   Contrastes WCAG comprobados: ver LEEME.md.
   ===================================================================== */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/Sora-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/Inter-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/JetBrainsMono-latin-var.woff2') format('woff2'); }

:root {
  /* ---------- 1. Marca SIcorp (fija: web pública y valores por defecto del área) ---------- */
  --si-violet-50:  #F1EEFF;
  --si-violet-100: #E3DDFF;
  --si-violet-300: #A9A2FF;   /* texto/acentos sobre fondo oscuro (8,1:1 sobre ink) */
  --si-violet-600: #5B3DF5;   /* PRIMARIO. Blanco encima 6,1:1 (AA) */
  --si-violet-700: #4B2FE0;   /* hover/pressed. Blanco encima 7,5:1 */
  --si-mint-100:   #DDF7F0;
  --si-mint-500:   #19C2A0;   /* SECUNDARIO. Solo decorativo o sobre oscuro (ink encima 8,1:1). NO como texto sobre blanco */
  --si-mint-700:   #0B7A66;   /* secundario como texto sobre blanco 5,3:1 */

  /* ---------- 2. Neutros (no los cambia el cliente) ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #F8F9FC;
  --n-50:  #F2F4F8;
  --n-100: #E6E9F0;
  --n-200: #D3D8E2;   /* bordes decorativos / separadores */
  --n-400: #8A93A6;   /* borde de campos (3,1:1, mínimo para componentes) */
  --n-500: #646D80;   /* texto secundario (5,2:1 sobre blanco; 4,85:1 sobre n-25) */
  --n-700: #343B4D;
  --n-800: #1F2535;
  --n-900: #0E1424;   /* ink: texto principal (18,4:1) y fondos oscuros */

  /* ---------- 3. Estados (no los cambia el cliente) ---------- */
  --success-600: #157F4A; --success-50: #E8F6EE;   /* texto 5,0:1 / 4,5:1 sobre su fondo */
  --warning-500: #F5A524; --warning-700: #8A5A00; --warning-50: #FFF4D6;  /* sólido con texto ink 9,0:1; texto 5,4:1 sobre su fondo */
  --error-600:   #C2281D; --error-50:   #FDECEA;   /* 5,8:1 / 5,1:1 */
  --info-600:    var(--si-violet-600); --info-50: var(--si-violet-50);

  /* ---------- 4. Roles semánticos (lo que usa la UI) ---------- */
  --bg:            var(--n-25);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --surface-inverse: var(--n-900);
  --border:        var(--n-200);
  --border-strong: var(--n-400);
  --text:          var(--n-900);
  --text-muted:    var(--n-500);
  --text-inverse:  var(--n-0);
  --text-inverse-muted: #B4BCCB;  /* 9,6:1 sobre ink */

  /* Marca activa: en la web pública = SIcorp. En el área del cliente se sobrescriben
     con sicorp-theme.js (ver LEEME). La UI SOLO usa estas variables, nunca los hex. */
  --brand:          var(--si-violet-600);  /* botón primario, nav activa, enlaces, foco */
  --brand-hover:    var(--si-violet-700);
  --brand-contrast: #FFFFFF;               /* texto/icono encima de --brand */
  --brand-text:     var(--si-violet-600);  /* --brand usado como texto sobre blanco (≥4,5:1) */
  --brand-soft:     var(--si-violet-50);   /* fondos suaves: chip, fila seleccionada */
  --accent:         var(--si-mint-500);    /* 2º color: detalles, gráficas, ilustración. Nunca texto */
  --accent-soft:    var(--si-mint-100);
  --focus-ring:     0 0 0 3px var(--n-0), 0 0 0 5px var(--brand);

  /* ---------- 5. Tipografía ---------- */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Escala (ratio ~1,25; display con clamp para 390 → 1440) */
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);  /* 40 → 68 px, Sora 700, lh 1.04, ls -0.03em */
  --fs-h1:      clamp(2rem, 1.5rem + 2vw, 3rem);          /* 32 → 48, Sora 700, lh 1.1, ls -0.02em */
  --fs-h2:      clamp(1.5rem, 1.25rem + 1vw, 2rem);       /* 24 → 32, Sora 600, lh 1.2 */
  --fs-h3:      1.25rem;   /* 20, Sora 600, lh 1.3 */
  --fs-h4:      1.0625rem; /* 17, Inter 600, lh 1.4 */
  --fs-body-lg: 1.125rem;  /* 18, Inter 400, lh 1.6 */
  --fs-body:    1rem;      /* 16, Inter 400, lh 1.55 */
  --fs-sm:      0.875rem;  /* 14, Inter 400/500, lh 1.45 */
  --fs-xs:      0.75rem;   /* 12, Inter 600, lh 1.35, mayúsculas con ls 0.06em (etiquetas) */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55;

  /* ---------- 6. Espaciado (base 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ---------- 7. Radios ---------- */
  --r-xs: 6px;    /* chips pequeños, checkbox */
  --r-sm: 8px;    /* inputs, botones */
  --r-md: 12px;   /* tarjetas internas, menús */
  --r-lg: 16px;   /* tarjetas, paneles */
  --r-xl: 24px;   /* bloques destacados, mockups */
  --r-pill: 999px;

  /* ---------- 8. Sombras (tinte ink, suaves) ---------- */
  --sh-1: 0 1px 2px rgba(14,20,36,.06), 0 1px 1px rgba(14,20,36,.04);
  --sh-2: 0 4px 12px -2px rgba(14,20,36,.08), 0 2px 4px rgba(14,20,36,.04);
  --sh-3: 0 16px 40px -12px rgba(14,20,36,.18), 0 4px 10px rgba(14,20,36,.05);
  --sh-brand: 0 10px 30px -10px color-mix(in srgb, var(--brand) 55%, transparent);

  /* ---------- 9. Movimiento ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;

  /* ---------- 10. Capas y tamaños de control ---------- */
  --control-h: 40px; --control-h-lg: 48px; --control-h-sm: 32px;  /* táctil en móvil: 44 mínimo */
  --z-header: 50; --z-overlay: 80; --z-toast: 100;
}