/* =============================================================
 * Sistema de diseño UI Formación — tokens
 * v1.0 · 2026-08-18
 *
 * FUENTE ÚNICA DE VERDAD. Si un valor no está aquí, no se usa.
 * Ningún archivo CSS de componente debe contener un color literal.
 *
 * Origen de los valores:
 *  - Bloque "declarados": los publica el plugin uif-academic-subscriptions
 *    v0.10.4 en su :root. No inventados.
 *  - Bloque "medidos": estilos computados de
 *    /ingles/b2/curso-oficial-de-cambridge-b2-fce/ (928 elementos).
 *  - Bloque "propuesta": huecos que el sistema no cubría (error,
 *    movimiento, capas, escala 4pt). Marcados como tales.
 *
 * Referencia visual: docs/design-system/GUIA.md
 * ============================================================= */

.uif-editorial, .uif-blog-author, .uif-blog-related, .uif-blog-nav, .uif-blog-archive {

  /* ---- Color · declarados por el plugin ---------------------- */
  --uif-yellow: #ffb606;
  --uif-ink: #18191d;
  --uif-muted: #666b76;
  --uif-line: #e7e8ec;
  --uif-soft: #f6f7f9;
  --uif-white: #ffffff;
  --uif-success: #16794b;

  /* ---- Color · medidos en componentes ----------------------- */
  --uif-warm-surface: #fff9e9;   /* tarjetas de aviso */
  --uif-warm-line: #ebcf79;      /* borde de aviso */
  --uif-warm-fill: #fff0c2;      /* relleno de badge numerado */
  --uif-warm-ink: #785700;       /* texto sobre relleno cálido */
  --uif-dark-surface: #1c1d21;   /* bloque de temario, hero */
  --uif-field-line: #cec9df;     /* borde de input */
  --uif-btn-line: #cfd4dc;       /* borde de botón secundario */
  --uif-btn-hover: #f0a800;      /* amarillo oscurecido, hover */

  /* ---- Color · PROPUESTA: semánticos que faltaban ------------ */
  /* El sistema tenía success pero no error: sin él no se pueden
     pintar formularios. No se añade azul de información a
     propósito: rompería la paleta de un solo acento. */
  --uif-ok-bg: #eefaf3;
  --uif-ok-line: #a9dcc3;
  --uif-danger: #b42318;
  --uif-err-bg: #fef3f2;
  --uif-err-line: #fecdca;

  /* ---- Tipografía ------------------------------------------- */
  --uif-font: "Open Sans", sans-serif;
  --uif-lh: 1.7;                 /* CONSTANTE en todo el texto corrido */

  --uif-fs-h1: 48.64px;
  --uif-fs-h2: 28px;
  --uif-fs-h3: 26px;
  --uif-fs-h4: 24px;
  --uif-fs-xl: 20px;
  --uif-fs-lg: 18px;
  --uif-fs-base: 16px;
  --uif-fs-kicker: 15.6px;
  --uif-fs-sm: 14px;
  --uif-fs-xs: 12px;
  --uif-ls-kicker: 1.4px;

  /* Pesos permitidos: 400 600 700 800 900.
     Los 850/760/780/750 de la web actual NO existen en Open Sans
     (300-800): el navegador los sintetiza y el render cambia según
     el dispositivo. Traducción oficial: 850 y 760 -> 800. */

  /* ---- Espaciado · PROPUESTA escala 4pt ---------------------- */
  /* Normaliza los valores sueltos actuales (54, 46, 38, 30, 27...) */
  --uif-sp-1: 4px;
  --uif-sp-2: 8px;
  --uif-sp-3: 12px;
  --uif-sp-4: 16px;
  --uif-sp-5: 20px;
  --uif-sp-6: 24px;
  --uif-sp-8: 32px;
  --uif-sp-10: 40px;
  --uif-sp-12: 48px;
  --uif-sp-14: 56px;
  --uif-sp-18: 72px;

  /* ---- Radios ----------------------------------------------- */
  /* Reduce los 9 valores reales (9-24px) a 6. Regla: cuanto mayor
     el bloque, mayor el radio. El 4px de Eduma NO se replica. */
  --uif-r-badge: 10px;
  --uif-r-control: 12px;         /* botones, inputs */
  --uif-r-bar: 18px;             /* barras, avisos */
  --uif-r-card: 22px;            /* tarjetas, acordeón */
  --uif-r-hero: 24px;            /* bloque de introducción */
  --uif-r-pill: 999px;           /* badges de estado, tabs */

  /* ---- Sombras ---------------------------------------------- */
  /* Firma del sistema: las sombras de CTA van teñidas de marca. */
  --uif-sh-cta: 0 10px 24px rgba(255, 182, 6, .25);
  --uif-sh-cta-lg: 0 12px 26px rgba(255, 182, 6, .25);
  --uif-sh-card: 0 18px 45px rgba(20, 24, 32, .08);
  --uif-sh-float: 0 14px 38px rgba(20, 24, 32, .11);
  --uif-sh-dark: 0 16px 32px rgba(0, 0, 0, .16);
  --uif-sh-sticky: 0 -8px 28px rgba(20, 24, 32, .10);
  --uif-sh-field: inset 0 1px 1px rgba(34, 34, 42, .03);
  --uif-shadow: 0 24px 70px rgba(20, 24, 32, .10);  /* declarado */

  /* ---- Movimiento · PROPUESTA ------------------------------- */
  --uif-dur-fast: 150ms;         /* hover, foco */
  --uif-dur-base: 250ms;         /* acordeón */
  --uif-dur-slow: 400ms;         /* overlays */
  --uif-ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- Capas · PROPUESTA ------------------------------------ */
  /* Sin esto, la CTA fija acaba tapando el menú o el banner de
     cookies tapa el modal. */
  --uif-z-base: 0;
  --uif-z-raised: 10;
  --uif-z-sticky: 100;
  --uif-z-header: 200;
  --uif-z-drawer: 300;
  --uif-z-overlay: 900;
  --uif-z-modal: 1000;
  --uif-z-toast: 1100;
  --uif-z-cookie: 1200;          /* legal manda sobre todo */

  /* ---- Embudo de matrícula ---------------------------------- */
  /* Canónico: /matricula-curso/?course_id=... — la página mejor
     construida del sitio. Cualquier embudo nuevo se alinea con esto. */
  --uif-step-dot: 36px;                    /* círculo del indicador de pasos */
  --uif-plan-border: 2px;                  /* borde de tarjeta de plan */
  --uif-plan-halo: 0 0 0 4px rgba(255, 182, 6, .14);  /* plan seleccionado */
  --uif-fs-plan-price: 31px;

  /* ---- Retícula · PROPUESTA --------------------------------- */
  /* Hoy conviven 1170 (Eduma), 1300 (Elementor), 1320 (Kit) y
     1120 (plugin). Se unifica en uno. */
  --uif-container: 1200px;
  --uif-gutter: 24px;
  --uif-measure: 720px;          /* ancho máx. de lectura */
}