/* ============================================================
   Quimera Torre — Design Tokens
   A1 · tokens.css  (source of truth para todo el sistema)
   v2: escala tipográfica, spacing 4px, elevación, easing,
       acento racionado, hover-bg neutral.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:        #050507;
  --bg2:       #0f0f13;
  --surface:   #1a1a21;
  --border:    #2a2a33;

  /* Text */
  --tx:        #fff;
  --tx-dim:    #a8aab5;
  --tx-dim2:   #7a7d87;

  /* Brand colors */
  --purple:    #8b5cf6;
  --cyan:      #06b6d4;

  /* Semantic / status */
  --ok:        #10b981;
  --warn:      #f59e0b;
  --bad:       #ef4444;
  --info:      #06b6d4;

  /* Border radii */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;

  /* Spacing (base) */
  --gap:       16px;

  /* Glows */
  --glow-cyan:   0 0 16px rgba(6,182,212,.3);
  --glow-purple: 0 0 16px rgba(139,92,246,.3);

  /* Typography — Geist preferred, system fallback */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ----------------------------------------------------------------
     EASING & TRANSITIONS  (A1 new)
     --ease       : curva suavizada para interacciones de UI
     --t-fast     : interacciones instantáneas (hover, toggle)
     --t-base     : transiciones de layout (panel, modal)
     ---------------------------------------------------------------- */
  --ease:    cubic-bezier(.2,.6,.2,1);
  --t-fast:  120ms var(--ease);
  --t-base:  200ms var(--ease);

  /* ----------------------------------------------------------------
     ESCALA TIPOGRÁFICA  (A1 new)
     Pasos de 2px de 10 a 28px; line-heights ópticos.
     Uso: font-size: var(--fs-13); line-height: var(--lh-13);
     ---------------------------------------------------------------- */
  --fs-10: 10px;  --lh-10: 1.4;
  --fs-11: 11px;  --lh-11: 1.4;
  --fs-12: 12px;  --lh-12: 1.45;
  --fs-13: 13px;  --lh-13: 1.5;
  --fs-14: 14px;  --lh-14: 1.5;
  --fs-15: 15px;  --lh-15: 1.45;
  --fs-16: 16px;  --lh-16: 1.4;
  --fs-18: 18px;  --lh-18: 1.35;
  --fs-20: 20px;  --lh-20: 1.3;
  --fs-22: 22px;  --lh-22: 1.25;
  --fs-24: 24px;  --lh-24: 1.2;
  --fs-28: 28px;  --lh-28: 1.15;

  /* ----------------------------------------------------------------
     SPACING — escala 4px  (A1 new)
     --sp-1: 4px  · --sp-2: 8px  · --sp-3: 12px · --sp-4: 16px
     --sp-5: 20px · --sp-6: 24px · --sp-7: 28px · --sp-8: 32px
     ---------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  /* ----------------------------------------------------------------
     ELEVACIÓN POR SUPERFICIE  (A1 new)
     Tres capas de luminosidad creciente + sombras acumulativas.
     surface-1 = base de contenido (cards, kanban cols)
     surface-2 = panel lateral, modal backdrop
     surface-3 = tooltip, dropdown, popover
     ---------------------------------------------------------------- */
  --surface-1: #1a1a21;          /* igual a --surface, base */
  --surface-2: #21212a;          /* +4% luminosidad */
  --surface-3: #2a2a35;          /* +8% luminosidad */

  --elev-1: 0 1px 3px rgba(0,0,0,.45), 0 1px 8px rgba(0,0,0,.3);
  --elev-2: 0 4px 16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);

  /* ----------------------------------------------------------------
     ACENTO RACIONALIZADO  (A1 new)
     --accent     : UN solo rol — botón primario, item activo, focus ring.
                    = --purple. NO usar para hovers genéricos.
     --hover-bg   : hover neutral (gris muy sutil). Reemplaza los
                    rgba(139,92,246,.04-.08) dispersos en hovers.
     ---------------------------------------------------------------- */
  --accent:    var(--purple);                  /* #8b5cf6 */
  --hover-bg:  rgba(255,255,255,.055);         /* gris translúcido, sin color */

  /* ----------------------------------------------------------------
     Legacy aliases — mantienen compatibilidad con index.html / app.js
     actuales hasta que Onda 3 reescriba esos archivos.
     ---------------------------------------------------------------- */
  --bg-alt:        var(--bg2);
  --surface2:      #12121a;   /* tono intermedio para inputs / chips */
  --surface3:      var(--surface);
  --text:          var(--tx);
  --muted:         var(--tx-dim);
  --green:         var(--ok);
  --amber:         var(--warn);
  --red:           var(--bad);
  --blue:          var(--cyan);
  --purple-soft:   #c4b5fd;
  --r:             var(--radius);
  --r-sm:          var(--radius-sm);
}