/* ============================================================
   DESIGN TOKENS — Variables globales del sistema
   ============================================================ */

:root {
  /* Paleta primaria */
  --color-primary:        #e94560;
  --color-primary-dark:   #c73250;
  --color-primary-light:  #f06b82;
  --color-primary-bg:     rgba(233, 69, 96, 0.08);

  /* Paleta de fondo */
  --color-bg:             #f4f5f7;
  --color-bg-2:           #ffffff;
  --color-bg-3:           #f0f1f3;

  /* Texto */
  --color-text:           #1a1d23;
  --color-text-2:         #5a6072;
  --color-text-3:         #9198a8;
  --color-text-inv:       #ffffff;

  /* Bordes */
  --color-border:         #e2e5ea;
  --color-border-2:       #d0d4db;

  /* Semáforo */
  --color-green:          #1D9E75;
  --color-green-bg:       #EAF3DE;
  --color-amber:          #BA7517;
  --color-amber-bg:       #FAEEDA;
  --color-red:            #e94560;
  --color-red-bg:         #FCEBEB;
  --color-blue:           #185FA5;
  --color-blue-bg:        #E6F1FB;
  --color-purple:         #7c3aed;
  --color-purple-bg:      #ede9fe;

  /* Radios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

  /* Transiciones */
  --transition: 0.15s ease;
}

/* Dark mode (si el sistema prefiere oscuro) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:      #0f1117;
    --color-bg-2:    #1a1d23;
    --color-bg-3:    #232730;
    --color-text:    #e8eaf0;
    --color-text-2:  #8b91a0;
    --color-text-3:  #555c6e;
    --color-border:  #2a2e38;
    --color-border-2:#3a3f4e;
    --color-green-bg:   rgba(29,158,117,0.12);
    --color-amber-bg:   rgba(186,117,23,0.12);
    --color-red-bg:     rgba(233,69,96,0.12);
    --color-blue-bg:    rgba(24,95,165,0.12);
    --color-purple-bg:  rgba(124,58,237,0.12);
  }
}