/* =====================================================================
   MIRADAS QUE PROTEGEN — Design Tokens
   Sistema de identidad · Escuela de Estudios Judiciales (ESEJ)
   Curso de Especialización en Justicia Juvenil
   ---------------------------------------------------------------------
   Estas variables son la única fuente de verdad del sistema visual.
   Cambia un token aquí y se propaga a todo el producto.
   ===================================================================== */

:root {
  /* ---- Paleta base ---------------------------------------------------
     ESTRUCTURA (texto, superficies, navegación): azul y verde.
     ÉNFASIS / ILUSTRACIÓN: terracota, amarillo, coral, morado.
     Regla: los cálidos NUNCA se usan como texto pequeño sobre crema. */
  --azul: #2f5d86;          /* Azul Protección — color principal */
  --azul-600: #274d72;      /* variante oscura (degradados, hover)   */
  --azul-400: #3a6fa6;      /* variante clara (degradados)           */
  --verde: #3f7d5a;         /* Verde — avance, estados positivos     */
  --verde-600: #2f6249;
  --terracota: #c8663c;     /* Énfasis cálido, etiquetas de sección  */
  --terracota-600: #b34f22;
  --amarillo: #d69a1f;      /* Ámbar accesible (texto sobre oscuro)  */
  --amarillo-bright: #e2b23c;/* Amarillo vivo (solo fondos/ilustr.)  */
  --coral: #d4574a;
  --morado: #6e4b7d;        /* Justicia / especialización / meta     */
  --morado-600: #5a3f68;

  /* ---- Neutros -------------------------------------------------------- */
  --ink: #22303f;           /* Texto principal (≈9:1 sobre crema)     */
  --ink-soft: #55606c;      /* Texto secundario                       */
  --muted: #8a8577;         /* Texto terciario / metadatos            */
  --paper: #f4efe0;         /* Fondo de página (crema cálido)         */
  --card: #fbf8ee;          /* Superficie de tarjeta (marfil)         */
  --line: #e7ddc6;          /* Bordes / divisores                     */
  --line-strong: #cdbfa0;
  --desk: #16211f;          /* Fondo "escritorio" (fuera del lienzo)  */
  --white: #ffffff;

  /* Tintes claros por color (fondos suaves de badges/callouts) */
  --tint-azul: #eef4fb;
  --tint-verde: #eaf3ee;
  --tint-terracota: #faefe7;
  --tint-coral: #fcece9;
  --tint-amarillo: #f9f1da;
  --tint-morado: #f0eaf3;

  /* ---- Degradados suaves --------------------------------------------- */
  --grad-azul: linear-gradient(135deg, #3a6fa6, #264c70);
  --grad-header: linear-gradient(120deg, #356aa0, #264c70);
  --grad-banner: linear-gradient(135deg, #356aa0 0%, #2b5480 52%, #4c4a7e 100%);
  --grad-cert: linear-gradient(130deg, #2f5d86, #5a4a7d);
  --grad-gold: linear-gradient(135deg, #ecc25a, #d69a1f);
  --grad-verde: linear-gradient(135deg, #4d8f68, #2f6249);
  --grad-progress: linear-gradient(90deg, #3f7d5a, #2f5d86);

  /* ---- Tipografía ----------------------------------------------------- */
  --font-head: 'Nunito', system-ui, sans-serif;   /* títulos, UI fuerte  */
  --font-body: 'Open Sans', system-ui, sans-serif; /* lectura            */

  --fs-eyebrow: 0.8125rem;  /* 13px */
  --fs-body: 1.125rem;      /* 18px — mínimo de lectura                   */
  --fs-sm: 0.9375rem;       /* 15px */
  --fs-xs: 0.8125rem;       /* 13px */
  --fs-h4: 1.25rem;         /* 20px */
  --fs-h3: 1.75rem;         /* 28px */
  --fs-h2: 2rem;            /* 32px */
  --fs-h1: 3.125rem;        /* 50px */

  --lh-tight: 1.08;
  --lh-snug: 1.4;
  --lh-body: 1.65;

  /* ---- Espaciado (escala de 4px) ------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px;

  /* ---- Radios --------------------------------------------------------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 22px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- Sombras suaves (con tinte, nunca negro plano) ----------------- */
  --shadow-sm: 0 10px 22px -12px rgba(34, 48, 63, 0.35);
  --shadow: 0 16px 36px -22px rgba(47, 93, 134, 0.5);
  --shadow-lg: 0 34px 70px -30px rgba(47, 93, 134, 0.55);
  --shadow-frame: 0 54px 100px -46px rgba(34, 48, 63, 0.6),
                  0 10px 30px -16px rgba(47, 93, 134, 0.28);
  --shadow-cta: 0 12px 26px -10px rgba(47, 93, 134, 0.75);

  /* ---- Objetivos de accesibilidad (documentación) -------------------- */
  --tap-min: 48px;          /* área táctil / click mínima                 */

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
}