/* ============================================================================
   MarketPulse — tokens
   Sistema tomado de companycam.com (referencia elegida por Enrique 2026-08-03),
   medido con getComputedStyle, no a ojo. La fuente de verdad es DESIGN.md.
   Ningún color se escribe a mano fuera de este archivo.
   ============================================================================ */

/* ---------------------------------------------------------------- fuentes --
   Equivalentes ABIERTAS de las de CompanyCam. Ellos usan Averta (interfaz) y
   Roc Grotesk Condensed (titulares); las dos son comerciales y sus archivos
   están licenciados a ellos — no se copian. Estas dos son SIL OFL, variables,
   auto-hospedadas y sin CDN (DESIGN.md §9).
     Figtree  ≈ Averta                 (20 KB)
     Archivo  ≈ Roc Grotesk Condensed  (88 KB, con eje de ancho 62–125%)
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin-var.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-var.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

:root{
  /* --- el papel: la rampa cálida de CompanyCam --- */
  --mp-bg:      #F7F6F2;   /* lienzo de toda la app */
  --mp-band:    #EFEDE7;   /* banda que separa secciones */
  --mp-surface: #FFFFFF;   /* tarjetas y paneles */
  --mp-sunk:    #F2F0EB;   /* hover de fila, celda hundida */
  --mp-line:    #E2E0DA;   /* borde de tarjeta */
  --mp-hair:    #EDEBE4;   /* línea de un pelo dentro de una tarjeta */

  /* --- tinta (todo medido sobre --mp-bg) --- */
  --mp-ink:   #111111;     /* texto principal    · 17.46:1 */
  --mp-ink-2: #45423B;     /* texto secundario   ·  9.27:1 */
  --mp-muted: #6F6B61;     /* rótulos, metadatos ·  4.91:1 */

  /* --- lo oscuro: sidebar y superficies de imagen --- */
  --mp-dark:      #111111;
  --mp-dark-2:    #1C1B19;   /* ítem levantado dentro del sidebar */
  --mp-dark-line: #2A2825;
  --mp-on-dark:   #F7F6F2;   /* 17.46:1 */
  --mp-on-dark-2: #A8A49A;   /*  7.59:1 */

  /* --- acción --- */
  --mp-blue:      #072CD9;   /* 8.19:1 sobre papel · 8.86:1 sobre blanco */
  --mp-blue-deep: #0522A8;   /* presionado */
  --mp-blue-soft: #E9EBF7;   /* fondo suave — medido en su propio sitio */
  --mp-on-blue:   #FFFFFF;

  /* --- amarillo de marca: SOLO sobre oscuro (1.36:1 sobre papel = invisible) --- */
  --mp-yellow: #FFD000;      /* 12.84:1 sobre #111111 */

  /* --- estados, todos verificados sobre papel --- */
  --mp-green:      #12734A;  /* 5.43:1 */
  --mp-green-soft: #E4F0E9;
  --mp-red:        #C0271F;  /* 5.47:1 */
  --mp-red-soft:   #FAE9E7;
  /* El ámbar significa "esto cuesta dinero" (§7) y el rojo significa "falló".
     Se barrieron SEIS ámbares y ninguno se separa del rojo en deuteranopía: el
     mejor dio ΔE 5.6 de un piso de 15. Es un límite del MATIZ, no del tono —
     ámbar y rojo son la misma familia para un deuteranope. #6E6A00 es el que
     mejor queda en visión normal (ΔE 20.0 contra el rojo, contra 14.2 del
     #8A5D00 anterior), y por eso §7 exige que el ámbar NUNCA vaya solo. */
  --mp-amber:      #6E6A00;  /* 5.21:1 — significa "esto cuesta" */
  --mp-amber-soft: #F5F2D9;
  --mp-purple:     #7B1FA2;  /* 7.59:1 — reservado a la IA */
  --mp-purple-soft:#F3E9F7;

  /* --- rampa de datos: seis, en este orden (DESIGN.md §2) ---
     Validada con scripts/validate_palette.js del skill dataviz: los 5 checks
     pasan sobre papel #F7F6F2. La versión anterior REPROBABA — su teal #0E6E86
     tenía croma 0.088 (bajo el piso: se leía gris) y el par magenta↔teal daba
     ΔE 7.7 en protanopía. Con #0087A8 y este orden, la peor pareja sube a 13.5.

     SOLO PARA MARCAS DE GRÁFICA, NUNCA PARA TEXTO. --mp-d4 da 3.86:1: pasa el
     piso de 3:1 de una marca y reprueba el 4.5:1 de una letra. El texto usa
     SIEMPRE los tokens de tinta; el color va en la marca de al lado. */
  --mp-d1:#072CD9; --mp-d2:#12734A; --mp-d3:#7B1FA2;
  --mp-d4:#0087A8; --mp-d5:#B26A00; --mp-d6:#B5306E;

  /* --- forma: TRES radios, como ellos. No hay cuarto. --- */
  --r-xs:4px; --r-sm:8px; --r-pill:999px;

  /* --- espaciado --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;

  /* --- tipografía --- */
  --font:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: 'Archivo', 'Figtree', -apple-system, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* La condensada pesada en mayúsculas es la firma de CompanyCam. */
  --stretch-display:78%;

  --t-badge: 700 11px/1 var(--font);
  --t-label: 700 12px/1 var(--font);
  --t-meta:  400 13px/1.5 var(--font);
  --t-base:  400 14px/1.55 var(--font);
  --t-card:  700 16px/1.3 var(--font);
  --t-sect:  800 20px/1.2 var(--display);
  --t-screen:800 28px/1.05 var(--display);
  --t-hero:  800 40px/1 var(--display);

  --track-label:.09em;

  /* --- movimiento --- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: 120ms;
  --med:  200ms;
}

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