:root {
  /* Marca UGEL Parinacochas (paleta inicial — confirmable desde panel) */
  --ugel-ink:        #0e1a2b;
  --ugel-ink-soft:   #1b3050;
  --ugel-blue:       #1461aa;
  --ugel-blue-soft:  #1a79d4;
  --ugel-gold:       #c07c1a;
  --ugel-gold-deep:  #8c5b13; /* WCAG AA para TEXTO sobre fondo claro (--ugel-gold falla, feature 004 T10) */
  --ugel-gold-soft:  #e09528;
  --ugel-gold-light: #f5c060;
  --ugel-sand:       #f6f2ea;
  --ugel-sand-soft:  #ede8dd;
  --ugel-white:      #ffffff;
  --ugel-border:     #ddd8cf;
  --ugel-muted:      #5f6975; /* WCAG AA sobre blanco/arena (auditoría a11y 012; #7a8799 daba 3.6:1) */
  --ugel-text:       #1e2c3d;

  /* Estados */
  --ugel-green:      #0a6b42;
  --ugel-amber:      #895300;
  --ugel-red:        #8c1f1f;

  /* Deep-teal gradient for dark feature bands (Adolfo's reference image,
     2026-07-28). Stops sampled from the actual image, not eyeballed: a
     near-black navy core with teal glows, brightest at #024a62. Contrast on
     that BRIGHTEST stop (the worst case): --ugel-gold-light 5.8:1,
     #ffffff 9.7:1 — both pass AA. Any element placed on this gradient must
     keep passing against #024a62, not against the average.
     First brick of a possible future dark palette (021); lives here because
     tokens.css is the single source of truth for color. */
  --ugel-grad-deep: linear-gradient(
    135deg,
    #003348 0%,
    #011c31 30%,
    #010214 50%,
    #01253b 72%,
    #024a62 100%
  );

  /* ───── Tipografía (feature 019) ─────
     Tres familias self-hosteadas vía fonts.css (SIL OFL — procedencia y licencias
     en assets/fonts/NOTICE.md). El cliente pidió Arial Black + Autography +
     Bahnschrift; ninguna es servible acá (Autography no viene con ningún sistema
     operativo, Bahnschrift es solo Windows 10+, Arial Black no está en Android ni
     iOS, y las de Microsoft no tienen licencia de incrustación web). Estas son sus
     equivalentes OFL, misma dirección tipográfica.

     PARA CAMBIAR DE FAMILIA no alcanza con editar el token: hay que bajar también
     sus woff2 y declarar sus @font-face en fonts.css. Un nombre de fuente sin sus
     archivos no renderiza en NINGÚN dispositivo — que es exactamente el problema
     que originó esta feature. Cada alternativa trae abajo su comando de descarga. */

  --ugel-font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Alternativa de cuerpo/UI: Barlow — misma raíz DIN, un poco más estrecha.
     Ojo: Barlow es ESTÁTICA (un woff2 por peso, ~15 caras) mientras Archivo es
     variable (un solo archivo cubre 400–700), así que el swap multiplica los
     archivos a versionar. La sintaxis de rango wght@400..700 NO funciona con
     familias estáticas (HTTP 400): hay que pedir los pesos discretos.
     curl "https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap"
     --ugel-font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; */

  --ugel-font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  /* Alternativa de títulos: Anton — más condensada y alta, golpe más vertical.
     También de peso único, así que se mantiene font-weight en --ugel-fw-regular
     (ver el comentario de pesos abajo; un 700 encima genera bold falso).
     curl "https://fonts.googleapis.com/css2?family=Anton&display=swap"
     --ugel-font-display: 'Anton', 'Archivo', system-ui, sans-serif; */

  --ugel-font-script:  'Sacramento', 'Segoe Script', cursive;
  /* Alternativa decorativa: Kaushan Script — más gruesa e inclinada.
     USO ACOTADO POR SPEC (019, criterio 3): solo en .hero h1 em. Nunca en cuerpo,
     navegación, botones, tablas, labels, breadcrumbs ni filtros — una script en
     una superficie funcional es una barrera de legibilidad real (baja visión,
     dislexia) en un portal .gob.pe.
     curl "https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap"
     --ugel-font-script: 'Kaushan Script', 'Segoe Script', cursive; */

  /* Pesos tipográficos. La 011 tenía una sola familia y la jerarquía la daba el
     PESO (--ugel-fw-heading en 700). Desde la 019 hay familia de display propia
     (Archivo Black) y la jerarquía la da la FAMILIA otra vez. */
  --ugel-fw-regular:  400;
  --ugel-fw-medium:   500;
  --ugel-fw-semibold: 600;
  --ugel-fw-bold:     700;

  /* Archivo Black tiene UN SOLO peso (400, visualmente ~900). Pedirle 700 hace que
     el navegador sintetice un bold FALSO encima de una cara que ya es negra:
     engorde artificial y bordes sucios. Por eso el alias de título vale 400 — no es
     un descuido. Las 19 reglas de título lo consumen vía var(--ugel-fw-heading), así
     que esta línea las gobierna a todas. Si algún día display vuelve a ser una
     familia CON pesos, se restaura acá en una línea y vuelven las 19 juntas. */
  --ugel-fw-heading:  var(--ugel-fw-regular);

  /* Radios y sombras */
  --ugel-r8:  8px;
  --ugel-r12: 12px;
  --ugel-r16: 16px;
  --ugel-shadow-s: 0 1px 6px rgba(14, 26, 43, 0.07);
  --ugel-shadow-m: 0 4px 20px rgba(14, 26, 43, 0.10);
  --ugel-shadow-l: 0 12px 48px rgba(14, 26, 43, 0.14);

  /* ───── Escala tipográfica (modular ratio 1.125 "Major Second") ─────
     Pensada para UI controlada. Los componentes deben usar los tokens
     semánticos de abajo, no estos directamente, para que cambiar el look
     sea 1 línea aquí en lugar de N en cada componente. */
  --ugel-fs-xs:    0.8rem;    /* 12.8px — micro labels, badges, chips */
  --ugel-fs-sm:    0.9rem;    /* 14.4px — meta secundaria, captions */
  --ugel-fs-md:    1rem;      /* 16px   — body UI, títulos de listing */
  --ugel-fs-lg:    1.125rem;  /* 18px   — body long-form (single post) */
  --ugel-fs-xl:    1.4rem;    /* 22.4px — h3 / section subheaders */
  --ugel-fs-2xl:   1.75rem;   /* 28px   — h2 / page section titles */
  --ugel-fs-3xl:   2.25rem;   /* 36px   — hero / page titles */

  /* ───── Tokens semánticos de listings ─────
     Un solo lugar controla el tamaño de TODAS las vistas (lista, compacta,
     cuadrícula) en TODOS los CPTs (Resoluciones, Formatos, Contrataciones,
     Integridad, etc.). Bumpear aquí afecta cada listing del plugin.
     Los breakpoints (tablet/móvil) están más abajo en el mismo bloque. */
  --ugel-listing-title:        var(--ugel-fs-md);     /* 1rem    — 16px */
  --ugel-listing-meta:         var(--ugel-fs-sm);     /* 0.9rem  — 14.4px */
  --ugel-listing-download:     var(--ugel-fs-sm);     /* 0.9rem  — 14.4px */
  --ugel-listing-icon-box:     38px;                  /* contenedor cuadrado del icono */
  --ugel-listing-icon-svg:     26px;                  /* SVG file-icon dentro del box */
  --ugel-listing-icon-emoji:   1rem;                  /* emoji fallback */
  --ugel-listing-card-pad-y:   0.9rem;                /* padding vertical del card */
  --ugel-listing-card-pad-x:   0.75rem;               /* padding horizontal del card */
  --ugel-listing-card-gap:     1rem;                  /* gap entre icon y body */
  --ugel-listing-line-height:  1.4;                   /* line-height del título */
  --ugel-listing-meta-mt:      0.2rem;                /* margin-top de la meta */

  /* Tablet (601-900px) — densidad intermedia */
  --ugel-listing-title-tablet:    0.95rem;
  --ugel-listing-meta-tablet:     0.82rem;
  --ugel-listing-icon-box-tablet: 34px;
  --ugel-listing-icon-svg-tablet: 24px;

  /* Móvil (≤600px) — sigue siendo legible, no enano */
  --ugel-listing-title-mobile:    0.95rem;
  --ugel-listing-meta-mobile:     0.82rem;
  --ugel-listing-icon-box-mobile: 34px;
  --ugel-listing-icon-svg-mobile: 24px;
}