/* MERITUS — tokens del sistema de diseño.
   Solo variables. Ninguna regla de estilo vive aquí.
   Los valores derivan del manual de marca (P12: marca/02-SISTEMA-VISUAL.md).
   Antes de tocar un color, lee tests/test_accesibilidad_color.py. */

@font-face { font-family:'Cinzel'; src:url('fonts/Cinzel.ttf') format('truetype');
             font-weight:400 900; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/EBGaramond.ttf') format('truetype');
             font-weight:400 800; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter.ttf') format('truetype');
             font-weight:100 900; font-display:swap; }

:root {
  /* --- Color: superficies --- */
  --bg: #FBF7EF;              /* marfil, fondo de página */
  --surface: #FFFFFF;         /* tarjetas y tablas */
  --surface-warm: #EFE3C7;    /* pergamino, bandas de resumen (siempre con filete) */
  --nav: #4E0E19;             /* burdeos hondo, barra lateral */

  /* --- Color: marca --- */
  --primary: #6E1423;
  --primary-hover: #571019;
  --on-primary: #FBF7EF;
  --accent: #B08D2E;          /* oro laurel: filetes, bordes, iconos. NUNCA texto */
  --accent-text: #7A5E12;     /* oro legible sobre claro */
  --accent-pale: #E6C766;     /* oro sobre fondo oscuro */

  /* --- Color: texto --- */
  --text: #2C2A26;
  --text-muted: #6B6357;
  --text-data: #1F2A44;

  /* --- Color: estados --- */
  /* Los colores de estado NO son los de la app actual: los de hoy suspenden AA
     para texto de 12 px (validado 3,59 y pendiente 4,23 en el peor dicromatismo).
     Estos son los mismos tonos, oscurecidos hasta pasar 4,5. Medido, no estimado. */
  --ok: #1B7660;        --ok-bg: #E7F6EF;
  --warn: #AA4F09;      --warn-bg: #FFF6E6;
  --danger: #BE123C;    --danger-bg: #FDEAEA;
  --neutral: #6B6357;   --neutral-bg: #F1EEE7;

  /* --- Bordes y sombras --- */
  --bd: rgba(44, 42, 38, .14);
  --bd-soft: rgba(44, 42, 38, .07);
  --bd-strong: rgba(44, 42, 38, .24);
  --sh-1: 0 1px 2px rgba(46, 26, 20, .06);
  --sh-2: 0 6px 20px rgba(46, 26, 20, .10);

  /* --- Tipografía --- */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'EB Garamond', Georgia, serif;
  --font-display: 'Cinzel', Georgia, serif;

  --fs-100: .75rem;    /* 12 — etiquetas, hints, cabeceras de tabla */
  --fs-200: .875rem;   /* 14 — BASE DE LA UI */
  --fs-300: 1rem;      /* 16 — prosa y campos */
  --fs-400: 1.125rem;  /* 18 — título de sección */
  --fs-500: 1.25rem;   /* 20 — título de página */
  --fs-600: 1.5rem;    /* 24 — título editorial */
  --fs-700: 1.875rem;  /* 30 — cifras destacadas */
  --fs-800: 2.25rem;   /* 36 */
  --fs-900: 3rem;      /* 48 — display */

  --lh-tight: 1.25;
  --lh-ui: 1.45;
  --lh-prose: 1.6;
  --tracking-label: .08em;

  /* --- Espaciado (base 4) --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* --- Geometría --- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;
  --row-h: 36px;
  --w-content: 1200px;
  --w-prose: 68ch;
  --w-nav: 220px;
  --w-nav-min: 56px;
  --w-cifra-min: 120px;   /* ancho mínimo de una cifra antes de envolver */
  --w-campo-min: 220px;   /* columna mínima en rejillas de campos */
  --tap: 44px;
  --tap-denso: 32px;      /* solo acciones dentro de fila de tabla — ver R5 */

  /* --- Movimiento --- */
  --dur-filete: 240ms;
  --dur-fila: 40ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  /* --- Rampa categórica para gráficas (Okabe-Ito, segura para dicromatismo).
         El color NO basta: cada serie lleva además forma de marcador propia y
         etiquetado directo. Máximo seis series con leyenda; el resto, «otros». --- */
  --serie-1: #0072B2;  /* azul */
  --serie-2: #E69F00;  /* naranja */
  --serie-3: #009E73;  /* verde azulado */
  --serie-4: #CC79A7;  /* púrpura rosado */
  --serie-5: #56B4E9;  /* celeste */
  --serie-6: #D55E00;  /* bermellón */
  --serie-7: #F0E442;  /* amarillo */
  --serie-8: #646464;  /* gris — «otros» (oscurecido respecto a Okabe-Ito: a #999999
                          la deuteranopia lo confundía con serie-3 y serie-4, bajando
                          la separacion minima a 7,4 deltaE; ver tests/test_paleta_datos.py) */

  /* Lienzo de datos del Panorama: superficie oscura deliberada, no modo oscuro.
     --viz-bg tiene que ser el tono que de verdad se pinta, porque
     tests/test_paleta_datos.py mide el contraste de las series contra él y
     app.js lo lee para pintar bordes y celdas "vacías" de mapas de calor.
     El fondo real de style.css es un degradado de #0b1020 a #10172a con un
     resalte radial de #1b2547 arriba a la derecha; ese resalte es MAS CLARO
     que el minimo que garantiza 3:1 para --serie-1/--serie-8 (2,89/2,53), así
     que expresar todo el fondo con este token habría exigido oscurecerlo o
     quitarlo, cambiando el aspecto. Se elige en su lugar el tono más oscuro
     ya pintado (#0b1020, el extremo "de" del degradado): coincide con la
     superficie real donde vive la mayoría del lienzo y style.css lo consume
     como `--bg0: var(--viz-bg)` para que ambos no puedan volver a divergir. */
  --viz-bg: #0B1020;
  --viz-text: #C9CCD2;
  --viz-grid: rgba(201, 204, 210, .12);
}