/*
 * Acervo vivo de verbos hñähñu — tokens de diseño (C3)
 * -----------------------------------------------------
 * Nombres funcionales, nunca étnicos (A3 §3 N6, §5).
 * Cada par de color de texto/fondo y de componente está verificado en
 * docs/C3-sistema-diseno.md §3.3 con docs/C3-prototipo/verificacion/contraste.py,
 * que lee ESTE archivo. Si cambia un valor, vuelva a ejecutar el script.
 *
 * Fuentes: «Acervo Sans» y «Acervo Serif», versiones modificadas (subconjuntos renombrados, GC-07) de
 * Andika 7.000 y Charis 7.000 de SIL Global, con la SIL Open Font License 1.1 («Andika», «Charis» y
 * «SIL» son nombres reservados). Se autoalojan en static/fonts/acervo-sans y acervo-serif, con OFL.txt y FONTLOG.txt;
 * se regeneran con scripts/fuentes/generar_subconjunto.sh (ver docs/C3-sistema-diseno.md §4.4).
 * No hay CDN de fuentes: la CSP solo permite font-src 'self'.
 */

/* ---------- 1. Fuentes autoalojadas ---------- */
@font-face {
  font-family: "Acervo Sans";
  src: url("../fonts/acervo-sans/AcervoSans-Regular.bb140d989d25.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acervo Sans";
  src: url("../fonts/acervo-sans/AcervoSans-Bold.9894f4d2cbfc.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acervo Serif";
  src: url("../fonts/acervo-serif/AcervoSerif-Regular.50e92adcd796.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens: modo claro (por defecto) ---------- */
:root {
  color-scheme: light dark;

  /* Superficies y texto */
  --color-fondo: #faf6ee;            /* manta clara */
  --color-superficie: #ffffff;       /* fichas, tablas, formularios */
  --color-superficie-2: #f1ebe0;     /* cabeceras de tabla, zonas secundarias */
  --color-texto: #1e1915;
  --color-texto-suave: #5b5149;      /* texto secundario: ≥ 4.5:1 en las tres superficies */
  --color-borde: #847769;            /* bordes de controles: ≥ 3:1 (1.4.11) */
  --color-borde-suave: #d9cfc2;      /* solo líneas de rejilla de tabla (no informativas) */

  /* Interacción */
  --color-enlace: #8c1d40;
  --color-enlace-hover: #6b1531;
  --color-primario: #8c1d40;         /* fondo de botón principal */
  --color-primario-hover: #6b1531;
  --color-sobre-primario: #ffffff;
  --color-foco: #1347c4;             /* anillo de foco: nunca se usa en ornamentos */
  --color-foco-contorno: #ffffff;    /* halo interior para fondos oscuros */
  --color-seleccion: #f7d7e0;

  /* Acentos: hilos saturados. Para ornamento y bordes, no para texto corrido */
  --color-acento-1: #b42a52;
  --color-acento-2: #1e6b73;
  --color-acento-3: #a8650a;
  --color-acento-4: #3d4fa0;
  --color-ornamento-1: var(--color-acento-1);
  --color-ornamento-2: var(--color-acento-2);

  /* Estados de atestiguación (A3 §5: el color es redundante; siempre hay texto + forma) */
  --color-estado-propuesto-texto: #6b4300;
  --color-estado-propuesto-fondo: #fcebc8;
  --color-estado-propuesto-borde: #9a6000;
  --color-estado-verificado-texto: #145a32;
  --color-estado-verificado-fondo: #ddf1e3;
  --color-estado-verificado-borde: #2e7d4b;
  --color-estado-pendiente-texto: #4f453d;
  --color-estado-pendiente-fondo: #ffffff;
  --color-estado-pendiente-borde: #6f635a;
  --color-estado-noaplica-texto: #4f453d;
  --color-estado-noaplica-fondo: #ece6dd;
  --color-estado-noaplica-borde: #7c7065;
  --color-estado-sinconfirmar-texto: #2f3e8f;
  --color-estado-sinconfirmar-fondo: #e6e9f8;
  --color-estado-sinconfirmar-borde: #4a5ab0;

  /* Estados de publicación (solo panel editorial) */
  --color-pub-borrador-texto: #4f453d;
  --color-pub-borrador-fondo: #ece6dd;
  --color-pub-revision-texto: #2f3e8f;
  --color-pub-revision-fondo: #e6e9f8;
  --color-pub-publicado-texto: #145a32;
  --color-pub-publicado-fondo: #ddf1e3;
  --color-pub-rechazado-texto: #8e1b17;
  --color-pub-rechazado-fondo: #fbe4e1;
  --color-pub-borde: #6f635a;

  /* Comparación */
  --color-comp-coincide: #2e7d4b;    /* barra lateral sólida */
  --color-comp-difiere: #3d4fa0;     /* barra lateral rayada */
  --color-comp-sindatos: #6f635a;    /* barra lateral discontinua */
  --color-comp-ins-fondo: #ddf1e3;
  --color-comp-del-fondo: #fbe4e1;

  /* Avisos */
  --color-aviso-texto: #5c3a00;
  --color-aviso-fondo: #fdf0d2;
  --color-aviso-borde: #a8650a;
  --color-info-texto: #1f3a6e;
  --color-info-fondo: #e5eefa;
  --color-info-borde: #3d63a8;
  --color-error-texto: #8e1b17;
  --color-error-fondo: #fbe4e1;
  --color-error-borde: #b3261e;
  --color-exito-texto: #145a32;
  --color-exito-fondo: #ddf1e3;
  --color-exito-borde: #2e7d4b;
  --color-marcador-texto: #5c3a00;   /* [[… — pendiente]] en staging */
  --color-marcador-fondo: #fff3b0;

  /* Tipografía */
  --fuente-ui: "Acervo Sans", "Andika", "Noto Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-formas: "Acervo Serif", "Charis", "Charis SIL", "Gentium Plus", "Noto Serif", "DejaVu Serif", serif;
  --fuente-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Escala fluida: nunca por debajo de 16 px; la parte en rem respeta el zoom (1.4.4) */
  --fs-0: 1rem;                                          /* 16 px: mínimo absoluto */
  --fs-1: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);     /* formas en tablas y fichas */
  --fs-2: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem);       /* h3, forma destacada */
  --fs-3: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);         /* h2 */
  --fs-4: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);       /* h1 */
  --fs-5: clamp(2rem, 1.6rem + 2vw, 3.25rem);            /* lema en la ficha */

  --lh-texto: 1.6;      /* texto corrido */
  --lh-formas: 1.75;    /* formas hñähñu: espacio para la raya inferior (U+0331) y la grave de è̱ */
  --lh-titulos: 1.3;    /* títulos: un lema como «è̱gi» lleva marca arriba y abajo */
  --lh-ui: 1.4;

  --peso-normal: 400;
  --peso-fuerte: 700;
  --subrayado-desfase: 0.32em;   /* el subrayado de enlace pasa por debajo de la raya inferior */
  --subrayado-grosor: 0.08em;
  --medida-lectura: 40rem;       /* ≈ 65–70 caracteres */

  /* Espacio (base 4 px) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --margen-pagina: 1rem;         /* 16 px a 360 px */

  /* Objetivos táctiles */
  --tactil-min: 2.75rem;         /* 44 px: controles principales */
  --tactil-abs: 1.5rem;          /* 24 px: mínimo absoluto WCAG 2.2 2.5.8 */

  /* Radios */
  --radio-1: 0.25rem;
  --radio-2: 0.5rem;
  --radio-3: 0.75rem;
  --radio-pildora: 999px;

  /* Sombras (discretas; la jerarquía la dan los bordes) */
  --sombra-1: 0 1px 2px rgb(30 25 21 / 0.08);
  --sombra-2: 0 2px 8px rgb(30 25 21 / 0.10);

  /* Foco (2.4.7, 2.4.11; aspira a 2.4.13: ≥ 2 px y ≥ 3:1) */
  --foco-ancho: 3px;
  --foco-separacion: 2px;
  --foco: var(--foco-ancho) solid var(--color-foco);

  /* Bordes */
  --borde-ancho: 1px;
  --borde-control: 2px solid var(--color-borde);

  /* Movimiento */
  --duracion-rapida: 120ms;
  --duracion-media: 200ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* Ornamento */
  --ornamento-modulo: 8px;       /* retícula de «puntada» */
  --ornamento-alto-cenefa: 16px;
  --ornamento-opacidad: 1;
}

/* ---------- 3. Modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo: #171411;
    --color-superficie: #211d19;
    --color-superficie-2: #2c2722;
    --color-texto: #f2ebe1;
    --color-texto-suave: #c4b8ab;
    --color-borde: #94887b;
    --color-borde-suave: #463e37;

    --color-enlace: #f4a0b8;
    --color-enlace-hover: #f9c6d4;
    --color-primario: #f4a0b8;
    --color-primario-hover: #f9c6d4;
    --color-sobre-primario: #2a0a15;
    --color-foco: #8ab4ff;
    --color-foco-contorno: #171411;
    --color-seleccion: #5a2236;

    --color-acento-1: #e0708f;
    --color-acento-2: #5fb3bb;
    --color-acento-3: #e0a24a;
    --color-acento-4: #8f9ee6;

    --color-estado-propuesto-texto: #f6c56b;
    --color-estado-propuesto-fondo: #3a2a0c;
    --color-estado-propuesto-borde: #c9922e;
    --color-estado-verificado-texto: #8fd9a8;
    --color-estado-verificado-fondo: #12321f;
    --color-estado-verificado-borde: #4fae72;
    --color-estado-pendiente-texto: #d3c8bc;
    --color-estado-pendiente-fondo: #211d19;
    --color-estado-pendiente-borde: #a39689;
    --color-estado-noaplica-texto: #d3c8bc;
    --color-estado-noaplica-fondo: #322c26;
    --color-estado-noaplica-borde: #a39689;
    --color-estado-sinconfirmar-texto: #b4bef6;
    --color-estado-sinconfirmar-fondo: #1e2550;
    --color-estado-sinconfirmar-borde: #7d8ce0;

    --color-pub-borrador-texto: #d3c8bc;
    --color-pub-borrador-fondo: #322c26;
    --color-pub-revision-texto: #b4bef6;
    --color-pub-revision-fondo: #1e2550;
    --color-pub-publicado-texto: #8fd9a8;
    --color-pub-publicado-fondo: #12321f;
    --color-pub-rechazado-texto: #ffb4ab;
    --color-pub-rechazado-fondo: #3d1210;
    --color-pub-borde: #a39689;

    --color-comp-coincide: #4fae72;
    --color-comp-difiere: #8f9ee6;
    --color-comp-sindatos: #a39689;
    --color-comp-ins-fondo: #12321f;
    --color-comp-del-fondo: #3d1210;

    --color-aviso-texto: #f6c56b;
    --color-aviso-fondo: #352710;
    --color-aviso-borde: #c9922e;
    --color-info-texto: #a9c7ff;
    --color-info-fondo: #172a47;
    --color-info-borde: #6f97d8;
    --color-error-texto: #ffb4ab;
    --color-error-fondo: #3d1210;
    --color-error-borde: #e0645a;
    --color-exito-texto: #8fd9a8;
    --color-exito-fondo: #12321f;
    --color-exito-borde: #4fae72;
    --color-marcador-texto: #fff3b0;
    --color-marcador-fondo: #4a3d00;

    --sombra-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sombra-2: 0 2px 8px rgb(0 0 0 / 0.5);
  }
}

/* ---------- 4. Más contraste (preferencia del sistema) ---------- */
@media (prefers-contrast: more) {
  :root {
    --color-texto-suave: var(--color-texto);
    --color-borde: var(--color-texto);
    --color-borde-suave: var(--color-texto-suave);
    --borde-ancho: 2px;
    --foco-ancho: 4px;
    --ornamento-opacidad: 0;  /* el ornamento desaparece: no aporta información */
  }
}

/* ---------- 5. Colores forzados (Windows Alto contraste) ---------- */
@media (forced-colors: active) {
  :root {
    --color-foco: Highlight;
    --color-borde: CanvasText;
    --color-borde-suave: GrayText;
    --foco: 3px solid Highlight;
    --ornamento-opacidad: 0;
  }
}

/* ---------- 6. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duracion-rapida: 0ms;
    --duracion-media: 0ms;
  }
}