/*
 * SUGESTOR-CDMX v4 — Design Tokens unificados · TECH-NOIR TEAL (2026-06-12)
 * Fuente unica de verdad para color, tipografia, radios y sombras.
 * Incluir en cada plantilla ANTES de su <style> local:
 *   <link rel="stylesheet" href="{{ url_for('static', filename='css/tokens.css') }}">
 *
 * Concepto (imagen de referencia): fondo teal profundo con bokeh, paneles de
 * cristal translucido de alta definicion, acentos cian luminosos, chips de
 * estado con borde brillante. Los nombres legacy (--accent, --cyan, --green,
 * --red, --bg, --text...) se conservan como ALIAS para los var(--X) existentes.
 */
:root {
  /* ---- Color: marca / acento ---- */
  --color-accent:        #00e5ff;
  --color-accent-2:      #00bcd4;
  --color-accent-dim:    rgba(0, 229, 255, 0.07);
  --color-accent-glow:   rgba(0, 229, 255, 0.16);

  /* ---- Color: superficies (cristal sobre teal profundo) ---- */
  --color-bg:            #02070d;
  --color-surface:       rgba(11, 27, 40, 0.58);
  --color-surface-2:     rgba(8, 21, 33, 0.46);
  --color-glass:         rgba(10, 25, 38, 0.40);
  --color-glass-2:       rgba(14, 31, 47, 0.28);

  /* ---- Color: texto (3 niveles) ---- */
  --color-text:          #d9f3fc;
  --color-text-2:        #7fa9bd;
  --color-text-3:        #3e5f73;

  /* ---- Color: bordes (cristal definido, nivel referencia) ---- */
  --color-border:        rgba(0, 229, 255, 0.26);
  --color-border-strong: rgba(0, 229, 255, 0.40);
  --color-border-hover:  rgba(0, 229, 255, 0.62);

  /* ---- Color: semanticos (chips luminosos de la referencia) ---- */
  --color-success:       #38e8a0;
  --color-warning:       #ffb84d;
  --color-danger:        #ff5f7e;
  --color-info:          #b388ff;
  --color-yellow:        #ffc83d;

  /* ---- Tipografia ---- */
  --font-sans: 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', sans-serif;
  --font-mono: 'Consolas', 'SF Mono', 'Fira Code', monospace;

  /* ---- Radios (escala) ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ---- Sombras y brillos ---- */
  --shadow:      0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 26px rgba(0, 229, 255, 0.13), 0 0 80px rgba(0, 229, 255, 0.05);
  --glow-cyan:   0 0 40px rgba(0, 229, 255, 0.10), 0 0 90px rgba(0, 229, 255, 0.05);

  /* ============================================================
   * ALIAS LEGACY -> canonicos (compatibilidad con plantillas)
   * ============================================================ */
  --accent:        var(--color-accent);
  --accent2:       var(--color-accent-2);
  --accent-dim:    var(--color-accent-dim);
  --accent-glow:   var(--color-accent-glow);
  --cyan:          var(--color-accent);
  --cyan2:         var(--color-accent-2);

  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --surface2:      var(--color-surface-2);
  --glass:         var(--color-glass);
  --glass2:        var(--color-glass-2);
  --glass-border:  var(--color-border);
  --glass-border2: var(--color-border-strong);

  --text:          var(--color-text);
  --text2:         var(--color-text-2);
  --text3:         var(--color-text-3);

  --border:        var(--color-border);
  --border2:       var(--color-border-strong);
  --border-hover:  var(--color-border-hover);

  --green:         var(--color-success);
  --orange:        var(--color-warning);
  --yellow:        var(--color-yellow);
  --red:           var(--color-danger);
  --purple:        var(--color-info);

  --font:          var(--font-sans);

  --radius:        var(--radius-lg);
}

html { background: var(--color-bg); }

/* Panel de cristal de alta definicion (utilidad para vistas nuevas/retoques) */
.ice-panel, .glass-hd {
  background: linear-gradient(172deg, rgba(13,34,46,.40) 0%, rgba(4,15,24,.56) 60%, rgba(2,10,17,.62) 100%);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.07),
    0 0 26px rgba(0,229,255,.13),
    0 18px 44px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 28px rgba(0,229,255,.04);
  backdrop-filter: blur(20px) saturate(1.35) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.35) brightness(1.08);
}