/* Trakinver — tokens de diseño (Dark Finance · Urbanist · Bento) */
:root {
  /* Fondos */
  --bg-base:        #111112;
  --bg-sidebar:     #0D0D0E;
  --bg-card:        #1C1C1E;
  --bg-card-hover:  #242425;
  --bg-elevated:    #2A2A2C;

  /* Texto */
  --text-primary:   #FFFFFF;
  --text-secondary: #A0A0A8;
  --text-muted:     #5A5A62;

  /* Acento */
  --accent:         #B2E5F9;
  --accent-dim:     rgba(178, 229, 249, 0.12);

  /* Semáforo */
  --positive:       #4ADE80;
  --positive-dim:   rgba(74, 222, 128, 0.12);
  --negative:       #F87171;
  --negative-dim:   rgba(248, 113, 113, 0.12);
  --neutral:        #FACC15;
  --neutral-dim:    rgba(250, 204, 21, 0.10);

  /* Bordes */
  --border:         rgba(255, 255, 255, 0.06);
  --border-hover:   rgba(255, 255, 255, 0.12);

  /* Radio */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Sombras */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 32px rgba(178, 229, 249, 0.08);

  /* Gradiente hero */
  --gradient-hero: linear-gradient(135deg, #1D4ED8 0%, #7C3AED 50%, #DB2777 100%);

  /* Tipografía */
  --font: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Dimensiones de layout */
  --sidebar-w: 64px;
  --topbar-h:  56px;
}