/* ==========================================================================
   MSL SERVICIOS — DESIGN TOKENS
   Sistema Visual B2B 2026 · Paso 02
   Colores de marca extraídos del logo oficial (muestreo pixel):
   índigo corporativo #0E0E8B · celeste #0998F3
   Contraste verificado: pares texto/fondo cumplen WCAG AA (≥ 4.5:1)
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------
     1. COLOR — PRIMARIO (Índigo MSL)
     ------------------------------------------------------------------ */
  --color-primary-50:  #F1F1FC;
  --color-primary-100: #DCDCF8;
  --color-primary-200: #B3B3ED;
  --color-primary-300: #6363D6;
  --color-primary-400: #3434BE;
  --color-primary-500: #1D1DA8;
  --color-primary-600: #0E0E8B;  /* base de marca */
  --color-primary-700: #0B0B70;  /* hover */
  --color-primary-800: #09095A;  /* active */
  --color-primary-900: #070745;
  /* Tripletas RGB para overlays con alfa (rgba) fuera de este archivo */
  --color-primary-900-rgb: 7, 7, 69;
  --color-neutral-0-rgb: 255, 255, 255;

  /* ------------------------------------------------------------------
     2. COLOR — ACENTO (Celeste MSL)
     Uso: iconografía, highlights, detalles. El texto requiere accent-600.
     ------------------------------------------------------------------ */
  --color-accent-50:  #EDF8FF;
  --color-accent-100: #D6EFFE;
  --color-accent-200: #ADE0FC;
  --color-accent-300: #7ACAF9;
  --color-accent-400: #3DB1F7;
  --color-accent-500: #0499F7;  /* base de marca — valor ajustado por el cliente (antes #0998F3) */
  --color-accent-600: #0270C8;  /* único tono apto como texto (AA 5.06) */
  --color-accent-700: #025A9E;

  /* ------------------------------------------------------------------
     3. COLOR — NEUTROS (grises fríos alineados al azul de marca)
     ------------------------------------------------------------------ */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F4F6F8;
  --color-neutral-200: #E7EBEF;
  --color-neutral-300: #D3DAE2;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-900: #111827;

  /* Aliases semánticos de superficie y texto */
  --color-bg:             var(--color-neutral-0);
  --color-surface:        var(--color-neutral-100);   /* secciones alternadas, fondos de card */
  --color-surface-raised: var(--color-neutral-0);     /* cards sobre surface */
  --color-border-subtle:  var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);

  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-caption:   var(--color-neutral-500);
  --color-text-disabled:  var(--color-neutral-400);
  --color-text-inverse:   var(--color-neutral-0);

  /* ------------------------------------------------------------------
     4. COLOR — ESTADOS / FEEDBACK
     ------------------------------------------------------------------ */
  --color-success-bg:      #E7F6EC;
  --color-success-border:  #BBE5C8;
  --color-success-text:    #166534;
  --color-success-base:    #15803D;

  --color-warning-bg:      #FEF3C7;
  --color-warning-border:  #FDE68A;
  --color-warning-text:    #92400E;
  --color-warning-base:    #D97706;

  --color-error-bg:        #FEE2E2;
  --color-error-border:    #FECACA;
  --color-error-text:      #B91C1C;
  --color-error-base:      #DC2626;

  /* ------------------------------------------------------------------
     5. TIPOGRAFÍA — Inter (variable, self-hosted recomendado)
     ------------------------------------------------------------------ */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);

  /* Tamaños fluidos (móvil → desktop) */
  --font-size-display: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);     /* 36 → 48 */
  --font-size-h1:      clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);  /* 30 → 40 */
  --font-size-h2:      clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem);  /* 24 → 30 */
  --font-size-h3:      clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); /* 18 → 20 */
  --font-size-body-l:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
  --font-size-body:    1rem;                                       /* 16 fijo */
  --font-size-small:   0.875rem;                                   /* 14 */
  --font-size-caption: 0.75rem;                                    /* 12 */

  /* Alturas de línea */
  --line-height-display: 1.1;
  --line-height-h1:      1.15;
  --line-height-h2:      1.25;
  --line-height-h3:      1.35;
  --line-height-body:    1.6;
  --line-height-small:   1.5;
  --line-height-caption: 1.4;

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

  /* Letter-spacing */
  --tracking-tight:  -0.02em;   /* display */
  --tracking-snug:   -0.01em;   /* h1, h2 */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;    /* captions/badges en mayúsculas */

  /* ------------------------------------------------------------------
     6. ESPACIADO — escala base 4px
     ------------------------------------------------------------------ */
  --space-1:  0.25rem;   /*   4 */
  --space-2:  0.5rem;    /*   8 */
  --space-3:  0.75rem;   /*  12 */
  --space-4:  1rem;      /*  16 */
  --space-5:  1.25rem;   /*  20 */
  --space-6:  1.5rem;    /*  24 */
  --space-7:  2rem;      /*  32 */
  --space-8:  2.5rem;    /*  40 */
  --space-9:  3rem;      /*  48 */
  --space-10: 4rem;      /*  64 */
  --space-11: 5rem;      /*  80 */
  --space-12: 6rem;      /*  96 */
  --space-13: 8rem;      /* 128 */

  /* Semánticos de layout
     (--section-padding-y reducido 20% a pedido del cliente: 64→51 / 96→77) */
  --section-padding-y: clamp(3.2rem, 2.4rem + 2.4vw, 4.8rem); /* 51 → 77 */
  --block-gap:         clamp(2rem, 1.5rem + 1.5vw, 3rem);   /* 32 → 48 */

  /* ------------------------------------------------------------------
     7. LAYOUT — contenedor, gutters, breakpoints (referencia)
     ------------------------------------------------------------------ */
  --container-max:     1200px;
  --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);     /* 16 → 32 */
  --grid-gap:          clamp(1rem, 0.75rem + 1vw, 1.5rem);  /* 16 → 24 */

  /* Breakpoints (los media queries no aceptan var(); usar estos valores):
     sm 640px · md 768px · lg 1024px · xl 1280px */

  /* ------------------------------------------------------------------
     8. RADIOS
     ------------------------------------------------------------------ */
  --radius-sm:   4px;     /* inputs pequeños, tags */
  --radius-md:   8px;     /* botones, inputs, dropdown items */
  --radius-lg:   12px;    /* cards, paneles, dropdowns */
  --radius-xl:   16px;    /* contenedores destacados (uso moderado) */
  --radius-full: 9999px;  /* pills, badges, avatares */

  /* ------------------------------------------------------------------
     9. ELEVACIÓN — sombras con tinte neutro-frío, sutiles
     ------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06);

  /* Focus accesible (teclado) */
  --focus-outline-color: var(--color-primary-600);
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;

  /* ------------------------------------------------------------------
     10. MOTION
     ------------------------------------------------------------------ */
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  /* Transición estándar de interacción */
  --transition-ui: background-color var(--duration-base) var(--ease-standard),
                   border-color var(--duration-base) var(--ease-standard),
                   color var(--duration-base) var(--ease-standard),
                   box-shadow var(--duration-base) var(--ease-standard);

  /* ------------------------------------------------------------------
     11. Z-INDEX
     ------------------------------------------------------------------ */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-overlay:  1040;
  --z-modal:    1060;
}

/* Respeto a preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}