/* ═══════════════════════════════════════════════
   IronBase — Design System Tokens
   01-tokens — Identidad visual IronBase 2026
   Electric Violet #6C5CE7 · Teal #00CECE
   Deep Slate backgrounds · Lavender greys
═══════════════════════════════════════════════ */

:root{
  /* ── Fondos — slate profundo con temperatura azulada ── */
  --bg:#0D0D12;--bg2:#13141C;--bg3:#1A1B23;--bg4:#22232E;--bg5:#2D2E3A;
  --line:#2A2B38;--line2:#33344A;

  /* ── Accent — violeta eléctrico como identidad IronBase ── */
  --gold:#E0DFF5;--gold2:#A8A5D0;--gold3:#F0F0F5;
  --gold-shine:#FFFFFF;--gold-deep:#4A4B5C;
  --gold-bg:rgba(108,92,231,.08);--gold-brd:rgba(108,92,231,.22);
  --gold20:rgba(108,92,231,.14);

  /* ── Primary aliases (usar en código nuevo) ── */
  --primary:#E0DFF5;--primary2:#A8A5D0;--primary3:#F0F0F5;
  --primary-bg:rgba(108,92,231,.08);--primary-brd:rgba(108,92,231,.22);

  /* ── Gradientes — violeta con profundidad ── */
  --grad-gold:linear-gradient(135deg,#3D3580 0%,#6C5CE7 35%,#8B7CF0 55%,#6C5CE7 75%,#3D3580 100%);
  --grad-silver:linear-gradient(135deg,#4A4B5C 0%,#A8A5D0 40%,#E0DFF5 60%,#A8A5D0 80%,#4A4B5C 100%);

  /* ── Silver ── */
  --silver:#A8A5D0;--silver2:#4A4B5C;--silver3:#E0DFF5;

  /* ── Textos ── */
  --txt:#F0F0F5;--txt2:#8B8D9E;--muted:#4A4B5C;

  /* ── Semáforo & acento ── */
  --green:#00D68F;--green-bg:rgba(0,214,143,.09);--green-brd:rgba(0,214,143,.25);
  --red:#FF4757;--red-bg:rgba(255,71,87,.09);--red-brd:rgba(255,71,87,.25);
  --amber:#FFBE0B;--amber-bg:rgba(255,190,11,.10);--amber-brd:rgba(255,190,11,.28);
  --blue:#6C5CE7;--blue-bg:rgba(108,92,231,.10);--blue-brd:rgba(108,92,231,.25);
  --purple:#A855F7;--purple-bg:rgba(168,85,247,.10);--purple-brd:rgba(168,85,247,.25);
  --fat:#FF6B81;--fat-bg:rgba(255,107,129,.12);--fat-brd:rgba(255,107,129,.3);

  /* ── Teal accent secundario ── */
  --teal:#00CECE;--teal-bg:rgba(0,206,206,.09);--teal-brd:rgba(0,206,206,.25);

  --r:16px;--rs:10px;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
}