/* ============================================================
   JÍCARA · Design System · tokens.css
   Fuente única de verdad. Todo color/tamaño/espacio sale de aquí.
   Identidad v2 · Azul y mandarina (paleta 52, elegida 2026-10-13).
   ============================================================ */

:root {
  /* ---- Color · paleta cruda (no usar directo en componentes) ---- */
  --j-azul:              #2464C4;
  --j-mandarina:         #FFB45B;
  --j-marfil:            #FFF9F0;
  --j-tinta:             #1E2A45;
  /* Derivados funcionales: no son nuevos colores protagonistas. */
  --j-azul-profundo:     #225098;
  --j-mandarina-suave:   #FFE0BA;
  --j-mandarina-tinta:   #62534C;  /* texto de acento sobre claro */
  --j-marfil-calido:     #FFEFDA;  /* texto secundario/acento sobre azul: 5.04:1 */
  --j-mandarina-velo:    rgba(255, 180, 91, .2);
  --j-exito:          #2e6b4f;
  --j-error:          #b3423a;
  --j-neutro:         #586071;   /* texto secundario sobre marfil: 6.03:1 */
  --j-linea:          #E0E4EA;

  /* Compatibilidad con documentos y piezas anteriores. Nuevas piezas usan
     los nombres actuales o, preferiblemente, los roles semánticos. */
  --j-borgona: var(--j-azul);
  --j-borgona-prof: var(--j-azul-profundo);
  --j-vino-noche: var(--j-tinta);
  --j-crema: var(--j-marfil);
  --j-crema-clara: var(--j-marfil);
  --j-crema-rosada: var(--j-marfil-calido);
  --j-oro: var(--j-mandarina);
  --j-oro-suave: var(--j-mandarina-suave);
  --j-oro-tinta: var(--j-mandarina-tinta);
  --j-oro-velo: var(--j-mandarina-velo);
  --j-tinta-oliva: var(--j-tinta);

  /* ---- Color · roles semánticos (esto SÍ se usa en componentes) ---- */
  --bg:            var(--j-marfil);
  --fg:            var(--j-tinta);
  --fg-suave:      var(--j-neutro);
  --marca:         var(--j-azul);
  --acento:        var(--j-mandarina);
  --acento-texto:  var(--j-mandarina-tinta);
  --foco:          var(--j-azul);
  --superficie:    #ffffff;
  --linea:         var(--j-linea);
  --btn-pri-bg:    var(--j-azul);
  --btn-pri-fg:    var(--j-marfil);

  /* ---- Tipografía ---- */
  --font-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-text:    'Inter',   -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 12px;  --text-sm: 14px;  --text-md: 16px;
  --text-lg: 19px;  --text-xl: 24px;
  --text-2xl: clamp(26px, 1.6vw + 20px, 32px);
  --text-3xl: clamp(32px, 2.4vw + 23px, 44px);
  --peso-titulo: 800;          /* Manrope ExtraBold */
  --track-titulo: -0.02em;     /* títulos apretados, como el wordmark */

  /* ---- Espaciado (base 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  /* ---- Radios ---- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-full: 999px;

  /* ---- Sombras (suaves; la marca no grita) ---- */
  --sombra-1: 0 2px 10px rgba(30, 42, 69, .07);
  --sombra-2: 0 4px 18px rgba(30, 42, 69, .14);

  /* ---- Layout ---- */
  --ancho-max: 1080px;
}

/* ---- Tema oscuro por sección (hero nocturno, tarjetas, footer) ----
   Se aplica con class="tema-oscuro" en cualquier contenedor. */
.tema-oscuro {
  --acento-texto:  var(--j-marfil-calido);
  --foco:          var(--j-marfil);
  --bg:            var(--j-azul);
  --fg:            var(--j-marfil);
  --fg-suave:      var(--j-marfil-calido);
  --marca:         var(--j-marfil);
  --superficie:    rgba(255, 249, 240, .06);
  --linea:         rgba(255, 249, 240, .15);
  --btn-pri-bg:    var(--j-mandarina);
  --btn-pri-fg:    var(--j-tinta);
  background: linear-gradient(135deg, var(--j-azul), var(--j-azul-profundo));
  color: var(--fg);
}

/* ---- Tema claro por sección — AÑADIDO POR AUDITORÍA [H01] ----
   .tema-oscuro re-mapea los roles hacia abajo y no había forma de volver.
   Cualquier isla clara dentro de una banda oscura (formulario, tarjeta de
   demo) debe llevar .tema-claro; así .campo, .tabla y .btn resuelven sus
   roles contra fondo claro en lugar de heredar --fg crema sobre crema. */
.tema-claro {
  --acento-texto:  var(--j-mandarina-tinta);
  --foco:          var(--j-azul);
  --bg:            var(--j-marfil);
  --fg:            var(--j-tinta);
  --fg-suave:      var(--j-neutro);
  --marca:         var(--j-azul);
  --superficie:    #ffffff;
  --linea:         var(--j-linea);
  --btn-pri-bg:    var(--j-azul);
  --btn-pri-fg:    var(--j-marfil);
  background: var(--bg);
  color: var(--fg);
}

/* ---- .tema-oscuro.plano — AÑADIDO POR AUDITORÍA [H10] ----
   El pie llevaba su fondo en el HTML: paleta
   cruda en la capa que solo debe hablar de roles. El modificador apaga el
   gradiente y deja el fondo plano de cierre. */
.tema-oscuro.plano { --bg: var(--j-tinta); background: var(--bg); }