/* ═══════════════════════════════════════════
   IO · INTERLOCUCIÓN ESTRUCTURAL
   Design Tokens — Paleta y Variables Globales
   Sistema visual v6 — 2026
   ═══════════════════════════════════════════ */

:root {

  /* ── Fondos (midnight blue) ── */
  --bg:             #0b1520;
  --bg-mid:         #0f1c2d;
  --bg-deep:        #0d1929;
  --bg-root:        #060e18;

  /* ── Oro ── */
  --oro:            #c9a55a;
  --oro-vivo:       #d4b472;
  --oro-dim:        rgba(201,165,90,0.45);
  --oro-tenue:      rgba(201,165,90,0.14);
  --oro-ring:       rgba(201,165,90,0.22);
  --oro-ring-inner: rgba(201,165,90,0.11);
  --oro-glow:       rgba(201,165,90,0.26);
  --oro-glow2:      rgba(201,165,90,0.10);

  /* ── Teal ── */
  --teal:           #069494;
  --teal-dim:       rgba(6,148,148,0.13);
  --teal-ring:      rgba(6,148,148,0.22);
  --teal-glow:      rgba(6,148,148,0.22);
  --teal-glow2:     rgba(6,148,148,0.10);

  /* ── Texto ── */
  --text:           #e8ddd0;
  --text-mid:       rgba(232,221,208,0.70);
  --text-dim:       rgba(232,221,208,0.38);

  /* ── Líneas y bordes ── */
  --line:           rgba(232,221,208,0.07);
  --line-mid:       rgba(232,221,208,0.13);
  --line-str:       rgba(232,221,208,0.20);

  /* ── Tipografía ── */
  --font-display:   'Cormorant Garamond', serif;
  --font-serif:     'Spectral', serif;
  --font-headline:  'Lora', serif;
  --font-mono:      'DM Mono', monospace;

  /* ── Google Fonts (referencia de carga) ──
     Cormorant Garamond: logo, pie IO
     Lora: headlines
     Spectral: cuerpo de texto, cartas, chat
     DM Mono: etiquetas, UI, botones
  ── */

  /* ── Espaciado ── */
  --space-xs:       0.4rem;
  --space-sm:       0.8rem;
  --space-md:       1.5rem;
  --space-lg:       2.5rem;
  --space-xl:       4rem;

  /* ── Transiciones ── */
  --transition-fast:        0.2s ease;
  --transition-mid:         0.4s ease;
  --transition-slow:        0.8s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-ceremonial:  1.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Bordes ── */
  --border-fino:    1px solid var(--line);
  --border-mid:     1px solid var(--line-mid);
  --border-oro:     1px solid var(--oro-dim);
  --border-teal:    1px solid var(--teal-dim);

}