/* ═══════════════════════════════════════════════════════════════
   tokens.css — Cona Design System v1
   Fuente: Figma file xvKXM9ND9oq8SFZwsxhVfJ
   ───────────────────────────────────────────────────────────────
   REGLA: Este archivo SOLO define variables en :root.
   No tiene selectores, no tiene componentes, no tiene media queries.
   Todo el app puede consumir estas vars con var(--nombre).
   ───────────────────────────────────────────────────────────────
   COMPATIBILIDAD: Las vars viejas (--bg, --green, --text2, etc.)
   se mantienen como aliases apuntando a los tokens nuevos.
   Nada del código existente se rompe.
═══════════════════════════════════════════════════════════════ */

:root {

  --color-lime-500:       #a7ee43;
  --color-lime-600:       #78c81e;
  --color-slate-900:      #0d1117;
  --color-slate-800:      #142029;
  --color-slate-700:      #1c2f3c;
  --color-slate-600:      #223648;
  --color-white:          #ffffff;
  --color-red-500:        #ef4444;
  --color-amber-500:      #fbbf24;
  --color-blue-500:       #58a6ff;
  --color-green-500:      #0d9f68;
  --color-whatsapp-500:   #25d366;
  --color-gray-500:       #94a3b8;

  --bg-default:   var(--color-slate-800);
  --bg-surface:   var(--color-slate-800);
  --bg-raised:    var(--color-slate-700);
  --bg-overlay:   var(--color-slate-600);

  --accent-base:      var(--color-lime-500);
  --accent-press:     var(--color-lime-600);
  --accent-tint-6:    rgba(167, 238, 67, 0.06);
  --accent-tint-12:   rgba(167, 238, 67, 0.12);
  --accent-tint-25:   rgba(167, 238, 67, 0.25);

  --text-primary:    rgba(255, 255, 255, 1.00);
  --text-secondary:  rgba(255, 255, 255, 0.75);
  --text-tertiary:   rgba(255, 255, 255, 0.50);
  --text-disabled:   rgba(255, 255, 255, 0.35);

  --border-subtle:   rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.22);

  --scrim-modal:     rgba(15, 15, 20, 0.92);

  --success-base:      var(--color-green-500);
  --success-tint-7:    rgba(37, 211, 102, 0.07);
  --warning-base:      var(--color-amber-500);
  --danger-base:       var(--color-red-500);
  --danger-tint-12:    rgba(239, 68, 68, 0.12);
  --info-base:         var(--color-blue-500);
  --whatsapp-base:     var(--color-whatsapp-500);
  --whatsapp-tint-7:   rgba(37, 211, 102, 0.07);
  --muted-base:        var(--color-gray-500);

  --opacity-0:    0;
  --opacity-5:    0.05;
  --opacity-10:   0.10;
  --opacity-20:   0.20;
  --opacity-25:   0.25;
  --opacity-35:   0.35;
  --opacity-50:   0.50;
  --opacity-60:   0.60;
  --opacity-75:   0.75;
  --opacity-90:   0.90;
  --opacity-100:  1.00;

  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;

  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   32px;
  --radius-pill:  9999px;

  --font-sans:              'Plus Jakarta Sans', system-ui, sans-serif;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  --font-size-nav:      9px;
  --font-size-caption:  11px;
  --font-size-button:   12px;
  --font-size-input:    13px;
  --font-size-body:     14px;
  --font-size-s:        18px;
  --font-size-md:       20px;
  --font-size-lg:       26px;
  --font-size-display:  40px;

  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;

  --elevation-1:      0 1px 2px rgba(0, 0, 0, 0.35);
  --elevation-2:      0 8px 24px rgba(0, 0, 0, 0.50);
  --elevation-glass:  inset 0 1px 0 rgba(255, 255, 255, 0.06),
                      0 12px 40px rgba(0, 0, 0, 0.55);

  /* ALIASES DE COMPATIBILIDAD — no borrar hasta terminar migración */
  --bg:      var(--bg-default);
  --bg2:     var(--bg-raised);
  --bg3:     var(--bg-overlay);
  --green:   var(--accent-base);
  --green2:  var(--accent-tint-12);
  --border:  var(--border-subtle);
  --text:    var(--text-primary);
  --text2:   var(--text-secondary);
  --text3:   var(--text-tertiary);
  --text4:   var(--text-disabled);
}