/* =============================================================================
   MERITapp — tokens de marca
   -----------------------------------------------------------------------------
   Fuente de verdad de color, tipografía y espaciado. Toda superficie (WeWeb,
   correos, documentos, prototipos) consume estos tokens. No escribir hex sueltos.

   Los valores de contraste anotados fueron CALCULADOS (WCAG 2.1) y están
   verificados por brand/contrast.test.ts, que falla si un par se rompe.

   Paleta base extraída de los píxeles del manual entregado (2026-09-27):
     papel #fffbf5 · navy #001a33 · teal oscuro #095255 · teal #1eadad
   Los hex impresos en ese manual eran inválidos. Ver docs/brand/README.md.
   ========================================================================== */

:root {
  /* --- Familia teal (H≈181) · identidad ---------------------------------- */
  --mt-teal-50:  #effbfb;
  --mt-teal-100: #d6f5f5;
  --mt-teal-200: #abeced;
  --mt-teal-300: #6fe0e2;
  --mt-teal-400: #31d5d8;  /* acción en modo oscuro — 9.74:1 sobre navy-900 */
  --mt-teal-500: #1eadad;  /* COLOR DE MARCA (isotipo). Decorativo: 2.67:1   */
  --mt-teal-600: #169092;  /* bordes, iconos, foco sobre claro — 3.75:1      */
  --mt-teal-700: #0f7476;  /* ACCIÓN sobre claro: texto y botones — 5.39:1   */
  --mt-teal-800: #095255;  /* del manual — 8.67:1                            */
  --mt-teal-900: #053c3d;

  /* --- Familia navy (H≈209) · estructura --------------------------------- */
  --mt-navy-50:  #f4f7fa;
  --mt-navy-100: #e3ebf2;
  --mt-navy-200: #c1d2e1;
  --mt-navy-300: #95aec6;
  --mt-navy-400: #5b86ae;
  --mt-navy-500: #386894;
  --mt-navy-600: #1f4e7a;  /* texto secundario sobre claro — 8.39:1          */
  --mt-navy-700: #0e3a62;
  --mt-navy-800: #042749;
  --mt-navy-900: #001a33;  /* COLOR DE MARCA (wordmark) — 17.04:1            */

  /* --- Neutros cálidos: el papel del manual, no blanco puro -------------- */
  --mt-papel:    #fffbf5;
  --mt-papel-2:  #f7f2ea;
  --mt-papel-3:  #ebe5db;
  --mt-blanco:   #ffffff;

  /* --- Semánticos de estado (no son de marca; cumplen AA sobre papel) ---- */
  --mt-exito:    #12695a;
  --mt-alerta:   #8a5a00;
  --mt-error:    #a3231f;
  --mt-info:     var(--mt-navy-600);

  /* --- Roles: lo que la UI usa. Nunca consumir la rampa directamente ----- */
  --mt-fondo:            var(--mt-papel);
  --mt-superficie:       var(--mt-blanco);
  --mt-superficie-sutil: var(--mt-papel-2);
  --mt-borde:            var(--mt-papel-3);
  --mt-borde-fuerte:     var(--mt-navy-300);

  --mt-texto:            var(--mt-navy-900);   /* 17.04:1 */
  --mt-texto-suave:      var(--mt-navy-600);   /*  8.39:1 */
  --mt-texto-inverso:    var(--mt-papel);

  --mt-accion:           var(--mt-teal-700);   /*  5.39:1 — AA texto     */
  --mt-accion-hover:     var(--mt-teal-800);
  --mt-accion-sutil:     var(--mt-teal-50);
  --mt-foco:             var(--mt-teal-600);   /*  3.75:1 — AA componente */
  --mt-marca:            var(--mt-teal-500);   /* SOLO isotipo y decoración */

  /* --- Tipografía: Poppins, del manual ----------------------------------- */
  --mt-fuente: "Poppins", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mt-peso-titulo: 700;
  --mt-peso-cuerpo: 400;
  --mt-peso-enfasis: 600;

  /* Escala 1.200 (tercera menor) sobre 16px */
  --mt-txt-xs:   0.694rem;
  --mt-txt-sm:   0.833rem;
  --mt-txt-base: 1rem;
  --mt-txt-lg:   1.2rem;
  --mt-txt-xl:   1.44rem;
  --mt-txt-2xl:  1.728rem;
  --mt-txt-3xl:  2.074rem;
  --mt-txt-4xl:  2.488rem;

  --mt-interlineado-titulo: 1.15;
  --mt-interlineado-cuerpo: 1.6;
  --mt-tracking-titulo: -0.02em;

  /* --- Espaciado: base 4px ----------------------------------------------- */
  --mt-e-1: 0.25rem;  --mt-e-2: 0.5rem;   --mt-e-3: 0.75rem;
  --mt-e-4: 1rem;     --mt-e-6: 1.5rem;   --mt-e-8: 2rem;
  --mt-e-12: 3rem;    --mt-e-16: 4rem;    --mt-e-24: 6rem;

  /* --- Radios y sombras: sobrios. El isotipo ya tiene los remates redondos */
  --mt-radio-sm: 6px;
  --mt-radio-md: 10px;
  --mt-radio-lg: 16px;
  --mt-radio-pill: 999px;

  --mt-sombra-sm: 0 1px 2px rgba(0, 26, 51, 0.06);
  --mt-sombra-md: 0 4px 12px rgba(0, 26, 51, 0.08);
  --mt-sombra-lg: 0 12px 32px rgba(0, 26, 51, 0.12);

  /* --- Área de resguardo del logo: altura de la 'm' del wordmark ---------- */
  --mt-logo-resguardo: 1em;
}

/* Modo oscuro: el logo invertido del manual es exactamente este fondo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mt-fondo:            var(--mt-navy-900);
    --mt-superficie:       var(--mt-navy-800);
    --mt-superficie-sutil: #06213d;
    --mt-borde:            var(--mt-navy-700);
    --mt-borde-fuerte:     var(--mt-navy-500);

    --mt-texto:            var(--mt-papel);     /* 17.04:1 */
    --mt-texto-suave:      var(--mt-navy-300);  /*  7.65:1 */
    --mt-texto-inverso:    var(--mt-navy-900);

    --mt-accion:           var(--mt-teal-400);  /*  9.74:1 */
    --mt-accion-hover:     var(--mt-teal-300);
    --mt-accion-sutil:     #06313a;
    --mt-foco:             var(--mt-teal-400);
    --mt-marca:            var(--mt-teal-400);  /* el 500 se apaga en oscuro */

    --mt-exito: #4fbfa3;  --mt-alerta: #e0a83c;  --mt-error: #ef7b74;
  }
}

:root[data-theme="dark"] {
  --mt-fondo: var(--mt-navy-900);
  --mt-superficie: var(--mt-navy-800);
  --mt-superficie-sutil: #06213d;
  --mt-borde: var(--mt-navy-700);
  --mt-borde-fuerte: var(--mt-navy-500);
  --mt-texto: var(--mt-papel);
  --mt-texto-suave: var(--mt-navy-300);
  --mt-texto-inverso: var(--mt-navy-900);
  --mt-accion: var(--mt-teal-400);
  --mt-accion-hover: var(--mt-teal-300);
  --mt-accion-sutil: #06313a;
  --mt-foco: var(--mt-teal-400);
  --mt-marca: var(--mt-teal-400);
  --mt-exito: #4fbfa3;  --mt-alerta: #e0a83c;  --mt-error: #ef7b74;
}

body {
  background: var(--mt-fondo);
  color: var(--mt-texto);
  font-family: var(--mt-fuente);
  font-size: var(--mt-txt-base);
  line-height: var(--mt-interlineado-cuerpo);
}

/* Anillo de foco visible: requisito de accesibilidad, no decoración. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mt-foco);
  outline-offset: 2px;
  border-radius: var(--mt-radio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}