/* ══════════════════════════════════════════════
   TOKENS — Variables de diseño (dark / light)
   Fuente única de verdad. Importar primero.
══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:wght@400;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,700;1,800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --transition-theme: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

[data-theme="dark"] {
  --bg:       #09090B;
  --bg2:      #111113;
  --surface:  #18181B;
  --surface2: #1F1F23;
  --border:   #27272A;
  --fg:       #F4F4F5;
  --fg2:      #71717A;
  --accent:   #3B82F6;
  --accent2:  #8B5CF6;
  --green:    #22C55E;
  --tag-bg:   rgba(255,255,255,0.04);
}

[data-theme="light"] {
  --bg:       #FAFAFA;
  --bg2:      #F4F4F5;
  --surface:  #FFFFFF;
  --surface2: #F4F4F5;
  --border:   #E4E4E7;
  --fg:       #09090B;
  --fg2:      #71717A;
  --accent:   #2563EB;
  --accent2:  #7C3AED;
  --green:    #16A34A;
  --tag-bg:   rgba(0,0,0,0.04);
}