/* ============================================================
   tokens.css — ANCLA · HTML navegable Universo IA OBL (Javier Perdomo)
   Dalí, Genio Audiovisual de AIONOVA · 2026-08-20 · JPOBL-001
   ------------------------------------------------------------
   Piel OBL: BLANCO editorial dominante + NEGRO obsidiana (tinta y
   estructura) + ROJO carmesí como único acento vivo. Fondos claros
   para toda la lectura; el negro y el rojo entran como bisturí, no
   como brocha (dirección de arte firmada por David 2026-08-20).
   Recolor del molde Itaca (azul→rojo, navy→obsidiana). Los nombres
   de variables se conservan: interactivo.css se re-viste sin tocarse.
   ============================================================ */

:root{
  /* ---------- Papel / lienzo — blanco editorial, cero fondo oscuro ---------- */
  --paper:      #FAFAFB;   /* lienzo principal */
  --paper-2:    #FFFFFF;   /* tarjetas / capas elevadas */
  --paper-3:    #F2F3F5;   /* zonas de reposo / bandeja (gris frío muy claro) */

  /* ---------- Tinta — negro obsidiana sobre claro ---------- */
  --ink:        #16161C;   /* texto principal (obsidiana casi negra) */
  --ink-soft:   #45474F;   /* leads, cuerpo secundario */
  --ink-mute:   #83868E;   /* labels, notas — NUNCA texto de lectura */

  /* ---------- Obsidiana — estructura (antes "navy") ---------- */
  --navy:       #1B1B21;   /* estructura, cenefas, bordes-top de tarjeta */
  --navy-deep:  #0D0D11;   /* bloque de contraste puntual (negro casi puro) */

  /* ---------- ACENTO memorable — ROJO CARMESÍ OBL ---------- */
  --accent:     #C8102E;   /* rojo OBL · reglas de sección, marcadores, CTA */
  --accent-ink: #A00C22;   /* rojo apto para texto sobre claro (AA) */
  --accent-tint:rgba(200,16,46,.075);

  /* ---------- Datos — grafito neutro (números, diagramas) ---------- */
  --data:       #4E5058;   /* grafito · números y diagramas, sobrio */
  --data-tint:  rgba(78,80,88,.08);

  /* ---------- Compat molde: gold reasignado a rojo ---------- */
  --gold:       var(--accent);
  --gold-tint:  var(--accent-tint);

  /* ---------- Semáforo de riesgo (Gate) — controlado ---------- */
  --ok:         #1B1B21;   /* checkmark = disco obsidiana (dentro de paleta) */
  --warn:       #A00C22;   /* fuera de alcance / baranda = rojo */
  --risk-bajo:  #4E5058;   /* grafito */
  --risk-medio: #B0741A;   /* ámbar controlado, único guiño cálido */
  --risk-alto:  #C8102E;   /* rojo OBL */

  /* ---------- Co-marca ---------- */
  --aion-blue:  #1B1B21;   /* neutralizado a obsidiana en esta piel */

  /* ---------- Líneas ---------- */
  --rule:       #E3E4E7;
  --rule-soft:  #EEEFF1;

  /* ---------- Acento por sección — alternancia obsidiana / rojo ---------- */
  --sc-01: var(--navy);        /* Hero              */
  --sc-02: var(--data);        /* Contexto          */
  --sc-03: var(--accent);      /* Dolor             */
  --sc-04: var(--accent);      /* Oportunidad       */
  --sc-05: var(--data);        /* Piloto            */
  --sc-06: var(--navy-deep);   /* Economía / cierre */

  /* ---------- Tipografía (self-hosted en assets/fonts/) ---------- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala tipográfica */
  --fs-eyebrow: .72rem;
  --fs-body:    1rem;
  --fs-lead:    1.24rem;
  --fs-h2:      clamp(1.5rem, 2.4vw, 2rem);
  --fs-h1:      clamp(2.2rem, 4.2vw, 3.1rem);

  /* ---------- Sistema editorial ---------- */
  --ed-accent:       var(--accent);
  --ed-air:          clamp(1.4rem, 3.2vw, 2.4rem);
  --ed-foto-max:     980px;
  --ed-hair:         1px solid var(--rule);
  --ed-hair-soft:    1px solid var(--rule-soft);
  --ed-measure:      64ch;
  --ed-measure-tight:46ch;

  /* ---------- Geometría / sombra (tintadas en obsidiana) ---------- */
  --radius:   10px;
  --wrap:     1120px;
  --shadow-1: 0 1px 2px rgba(13,13,17,.05), 0 1px 1px rgba(13,13,17,.04);
  --shadow-2: 0 6px 20px rgba(13,13,17,.09);

  /* ---------- Movimiento ---------- */
  --dur:      .42s;
  --dur-fast: .2s;
  --ease:     cubic-bezier(.22,.61,.36,1);
}