/* =========================
   VARIABLES BASE (NEUTRO + AZUL TECNOLÓGICO)
========================= */
:root {
  /* Fondos (se quedan neutros) */
  --bg: #f4f4f5;
  --bg-header: #f4f4f5e8;
  --bg-footer: #e4e4e7;
  --card: #ffffff;
  --border: #e4e4e7;

  /* Texto */
  --text: #18181b;
  --text-secondary: #2563eb;
  /* azul tecnológico suave */

  /* Acento principal */
  --primary: #2563eb;
  /* azul moderno */
  --primary-hover: #1d4ed8;

  /* Estados (alineados al azul) */
  --success: #0ea5e9;
  /* azul claro */
  --error: #1e40af;
  /* azul profundo */
  --warning: #3b82f6;
  /* azul medio */
}

/* =========================
   MODO OSCURO
========================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* Fondos (neutros) */
    --bg: #09090b;
    --bg-header: #09090be8;
    --bg-footer: #27272a;
    --card: #18181b;
    --border: #27272a;

    /* Texto */
    --text: #fafafa;
    --text-secondary: #60a5fa;

    /* Acento */
    --primary: #3b82f6;
    --primary-hover: #60a5fa;

    /* Estados */
    --success: #38bdf8;
    --error: #1d4ed8;
    --warning: #2563eb;
  }
}