/* ══════════════════════════════════════════════════════════════════
   Envido Reportes — Design Tokens (single source of truth)
   [TICKET-200] Este archivo consolida todos los tokens que antes
   estaban dispersos en app.css, dashboard-performance.css y login-v2.css.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Colors: primitives ──────────────────────────────────────── */
  --color-black:       #080808;
  --color-white:       #f0f0f0;
  --color-lime:        #b8ff00;
  --color-red:         #ff4d4d;
  --color-yellow:      #f0a800;
  --color-blue:        #5ab0ff;

  /* ── Colors: semantic ────────────────────────────────────────── */
  --bg:                var(--color-black);
  --bg-elev-1:         rgba(255,255,255,.032);  /* card background */
  --bg-elev-2:         rgba(255,255,255,.054);  /* hover */
  --line:              rgba(255,255,255,.10);
  --line-strong:       rgba(255,255,255,.18);

  --text:              var(--color-white);
  --text-muted:        rgba(240,240,240,.66);   /* ratio ~8.4 AA OK */
  --text-muted-strong: rgba(240,240,240,.48);   /* ratio ~4.6 AA OK large */

  --brand-primary:     var(--color-lime);
  --brand-primary-fg:  #050505;

  --danger:            var(--color-red);
  --warning:           var(--color-yellow);
  --success:           var(--color-lime);
  --info:              var(--color-blue);

  /* ── Typography: font families ───────────────────────────────── */
  --font-display:      'Cal Sans', 'Host Grotesk', system-ui, sans-serif;
  --font-body:         'Host Grotesk', system-ui, sans-serif;
  --font-mono:         ui-monospace, 'SF Mono', Monaco, Menlo, Consolas, monospace;

  /* ── Typography: scale ───────────────────────────────────────── */
  --text-xs:           11px;
  --text-sm:           12px;
  --text-base:         13px;
  --text-md:           14px;
  --text-lg:           16px;
  --text-xl:           20px;
  --text-2xl:          24px;
  --text-3xl:          32px;
  --text-4xl:          40px;

  /* ── Weights ─────────────────────────────────────────────────── */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;

  /* ── Line heights ────────────────────────────────────────────── */
  --leading-tight:     1.1;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.7;

  /* ── Spacing (8px base) ──────────────────────────────────────── */
  --space-0:           0;
  --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 ──────────────────────────────────────────────────── */
  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         20px;
  --radius-full:       9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,.2);
  --shadow-md:         0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:         0 20px 60px rgba(0,0,0,.55);
  --shadow-glow:       0 0 0 6px rgba(184,255,0,.14);

  /* ── Z-index semantic ────────────────────────────────────────── */
  --z-base:            0;
  --z-dropdown:        10;
  --z-sticky:          20;
  --z-overlay:         40;
  --z-modal:           60;
  --z-toast:           80;
  --z-tooltip:         100;

  /* ── Transitions ─────────────────────────────────────────────── */
  --ease-default:      cubic-bezier(.4, 0, .2, 1);
  --dur-fast:          .15s;
  --dur-normal:        .25s;
  --dur-slow:          .4s;

  /* ── Legacy aliases — mantienen compat con CSS existente ─────── */
  /* NOTA: estos aliases dejan que el codebase actual siga funcionando
     mientras se migra progresivamente a los nombres canónicos. Se pueden
     remover en una fase futura una vez todas las referencias migren.     */
  --accent:            var(--brand-primary);
  --g:                 var(--brand-primary);
  --lime:              var(--brand-primary);
  --muted:             var(--text-muted);
  --muted2:            var(--text-muted-strong);
  --font-num:          var(--font-display);
}