/* tokens.css - Variables :root y reset universal
   Extraido de styles.css (sub-paso 2b, mayo 2026)
   Originalmente parte del bloque 1 inline de index.html. */

/* ══════════ DESIGN TOKENS ══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --parch-bg:#F4F0E8;--parch-bg2:#EAE3D4;
  --parch-ink:#3B2A1A;--parch-border:#B8945A;
  --parch-shadow:0 4px 18px rgba(59,42,26,.18),0 0 0 1px rgba(59,42,26,.08);
  --parch-shadow-lg:0 12px 40px rgba(59,42,26,.25),0 0 1px rgba(59,42,26,.1);
  --paper:#FAF8F4;--paper2:#F4F0E8;--paper3:#EAE3D4;
  --ink:#1C1510;--ink2:#44342A;--muted:#7A6655;--border:#D4C4A8;
  --blue:#2563EB;--blue-lt:#DBEAFE;--blue-dk:#1D4ED8;
  --green:#16A34A;--green-lt:#DCFCE7;
  --red:#DC2626;--red-lt:#FEF2F2;
  --amber:#D97706;--amber-lt:#FEF3C7;
  --purple:#7C3AED;--purple-lt:#EDE9FE;
  --r:14px;--r-lg:20px;
  --sh:0 3px 16px rgba(59,42,26,.14),0 0 0 1px rgba(59,42,26,.06);
  --sh-lg:0 12px 40px rgba(59,42,26,.22),0 0 1px rgba(59,42,26,.08);
  --sh-card:0 4px 22px rgba(59,42,26,.1),0 0 0 1px rgba(59,42,26,.05);
  --fire:#FF4500;--fire-lt:#FFF1EE;--gold:#F59E0B;--gold-lt:#FFFBEB;

  /* ─────────────────────────────────────────────────────────────
     UI DESIGN SYSTEM — Premium educational SaaS palette
     Used app-wide. Per-domain tokens (syntactic colours, arcade
     neón, etc.) override these locally.
     ───────────────────────────────────────────────────────────── */
  /* Surfaces
     Background revisado (C.3, mayo 2026): el crema #F4F2EC viejo tiraba
     a beige-tostado y chocaba con la paleta navy/teal. Sustituido por un
     blanco-cool sutil que deja respirar el contenido sin competir. */
  --ui-bg:        #F4F5F8;   /* page background — cool off-white, neutro elegante */
  --ui-surface:   #FFFFFF;   /* cards, modals */
  --ui-surface-2: #FAFAFC;   /* subtle alt surface (inset panels) — un punto más oscuro que surface */
  --ui-border:    #E2DFD5;   /* default borders, subtle */
  --ui-border-strong: #C9C3B5; /* dividers, active edges */

  /* Text */
  --ui-ink:       #0F2342;   /* primary text — deep navy, not pure black */
  --ui-ink-2:     #1E3A5F;   /* secondary headings */
  --ui-muted:     #5C6B7E;   /* body muted text */
  --ui-muted-2:   #94A3B8;   /* captions, helper text */

  /* Brand & interaction */
  --ui-navy:        #0F2342;
  --ui-navy-soft:   #1E3A5F;
  --ui-navy-tint:   #EAEEF5; /* navy at ~6% — for hover bg, tag bg */
  --ui-teal:        #0F766E; /* primary action / CTA accent */
  --ui-teal-dk:     #115E59;
  --ui-teal-tint:   #E5F4F1;
  --ui-cyan:        #0891B2; /* secondary accent / links */
  --ui-cyan-tint:   #E5F2F6;
  --ui-magenta:     #BE185D; /* tertiary / arcade-like energy */
  --ui-magenta-tint:#FBE8EE;

  /* Status (semantic) */
  --ui-ok:        #15803D;
  --ui-ok-tint:   #DCFCE7;
  --ui-warn:      #B45309;
  --ui-warn-tint: #FEF3C7;
  --ui-err:       #BE123C;
  --ui-err-tint:  #FFE4E6;
  --ui-info:      #1E40AF;
  --ui-info-tint: #DBEAFE;

  /* Radii */
  --ui-r-sm: 8px;
  --ui-r:    12px;
  --ui-r-lg: 16px;
  --ui-r-xl: 22px;
  --ui-r-pill: 999px;

  /* Shadows (soft, navy-tinted instead of brown) */
  --ui-sh-1: 0 1px 2px rgba(15,35,66,.05), 0 2px 6px rgba(15,35,66,.06);
  --ui-sh-2: 0 1px 2px rgba(15,35,66,.05), 0 6px 18px rgba(15,35,66,.09);
  --ui-sh-3: 0 2px 4px rgba(15,35,66,.06), 0 14px 32px rgba(15,35,66,.13);
  --ui-sh-focus: 0 0 0 3px rgba(15,118,110,.30);

  /* Type system */
  --ui-font-display: 'Fraunces', 'Lora', Georgia, serif;
  --ui-font-body:    'Lora', 'Georgia', serif;
  --ui-font-ui:      'DM Sans', 'Nunito', system-ui, sans-serif;
  --ui-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Motion */
  --ui-ease:       cubic-bezier(.16,1,.3,1);
  --ui-ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ui-dur-fast:   .14s;
  --ui-dur:        .22s;
  --ui-dur-slow:   .42s;

  /* Portada palette — premium minimalista (mayo 2026).
     Crema cálido + petróleo + esmeralda. Independiente de --ui-* para no
     arrastrar el resto de pantallas si la paleta global cambia. */
  --portada-bg:        #F5F1E8; /* cream — cálido */
  --portada-card:      #FFFFFF;
  --portada-border:    #E6E0D2;
  --portada-navy:      #102A43; /* petróleo, títulos — barra de Sintáctico */
  --portada-navy-soft: #1E3A5F;
  --portada-teal:      #0F766E; /* esmeralda — barra de Morfológico */
  --portada-teal-soft: #14B8A6;
  --portada-azul:      #2F6FB0; /* azul acero medio — barra de Sintagmas (distinto del navy) */
  --portada-vino:      #9D4B5E; /* granate suave — barra de Compuesta (cálido, ni violeta ni naranja) */
  --portada-oliva:     #5C6B2E; /* oliva editorial — barra de la Fábrica de Palabras */
  --portada-blue-soft: #7FA7C9; /* azul suave (legacy, otros usos) */
  --portada-cyan:      #0E7490;
  --portada-magenta:   #BE185D; /* solo arcade */
  --portada-muted:     #5C6B7E;
  --portada-decor:     rgba(15,42,67,0.06); /* puntos/círculos decorativos */

  /* ─────────────────────────────────────────────────────────────
     FÁBRICA DE PALABRAS — paleta del módulo (jul-2026)
     Oliva editorial. Es el quinto acento de la paleta de portada y
     respeta su regla escrita: "no se usa violeta ni neón".
     Por qué oliva y no otro: los cuatro académicos ya ocupan el eje
     frío (petróleo 210°, esmeralda 175°, azul acero 210°) y el
     granate (345°); Arcade y Chispa ocupan el ámbar (35°). El hueco
     real de la rueda es el verde-amarillo (~75°), que además NO se
     confunde con el esmeralda de Morfológico: uno es verde-azul y
     otro verde-amarillo. Semánticamente encaja con un taller
     (delantal, banco de trabajo) y es un color que en secundaria se
     lee como "de mayores", no como infantil.
     Todo el módulo referencia estas variables: cambiar el color de
     la Fábrica es cambiar --fab-oliva y sus derivados, nada más.
     ───────────────────────────────────────────────────────────── */
  --fab-oliva:      #5C6B2E; /* acento principal: barras, títulos, botón */
  --fab-oliva-dk:   #44511F; /* sombra dura del botón y estado :active */
  --fab-oliva-soft: #7E9142; /* hover y elementos secundarios */
  --fab-tint:       #F3F5E9; /* fondo de ficha/panel en reposo */
  --fab-tint-2:     #E7ECD3; /* fondo de ficha seleccionada */
  --fab-border:     #C3CFA0; /* borde en reposo */

  /* ─────────────────────────────────────────────────────────────
     LABORATORIO DE ORACIONES (jul-2026) — mismo patrón que --fab-*:
     cambiar el color del módulo es cambiar --lab-verde y derivados,
     nada más. Verde tomado directamente del color de cabecera ya
     elegido para la hoja Laboratorio_Banco en el Sheet (#1b7a4d),
     para que Sheet y app se reconozcan como el mismo módulo. OJO:
     queda cerca de --green (#16A34A, Morfológico/Maestro) — se
     distinguen por ser más oscuro y virar a azulado, pero si al
     verlas juntas en la portada resultan confundibles, es la primera
     variable a retocar (ver arriba, nota de la Fábrica sobre la
     rueda de color de la portada).
     ───────────────────────────────────────────────────────────── */
  --lab-verde:      #1B7A4D; /* acento principal: barras, títulos, botón */
  --lab-verde-dk:   #145A39; /* sombra dura del botón y estado :active */
  --lab-verde-soft: #2F9C68; /* hover y elementos secundarios */
  --lab-tint:       #EAF6EF; /* fondo de ficha/panel en reposo */
  --lab-tint-2:     #D3ECDE; /* fondo de ficha seleccionada */
  --lab-border:     #A8D8BE; /* borde en reposo */
}