/* ═══════════════════════════════════════════
   E Basic TI · Temas de color (variables CSS)
   Cada bloque es un tema. Edita los hex o copia uno para crear otro.
   ═══════════════════════════════════════════ */

/* ══════════════ TEMAS ══════════════
   Cada tema es un bloque de variables. Edita los hex y listo. */

:root, [data-theme="azul"] {            /* Azul elegante de la marca */
  --bg: #f5f8ff;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #0b1c3a;
  --muted: #56637d;
  --primary: #1a6be0;
  --primary-strong: #0d3f9e;
  --soft: #dcebff;
  --line: rgba(26, 107, 224, .18);
  --grad-a: #1a6be0;                    /* gradientes de la marca */
  --grad-b: #5aa9f7;
  --grad-c: #123f9e;
  --glow: rgba(26, 107, 224, .25);
  --btn-text: #ffffff;
}
[data-theme="dark"] {                   /* Oscuro blanco / negro */
  --bg: #07080c;
  --surface: #0e1017;
  --card: #12151f;
  --ink: #f5f7fb;
  --muted: #98a1b3;
  --primary: #f5f7fb;
  --primary-strong: #ffffff;
  --soft: #1d2230;
  --line: rgba(245, 247, 251, .14);
  --grad-a: #ffffff;
  --grad-b: #8b93a7;
  --grad-c: #d8dde8;
  --glow: rgba(255, 255, 255, .14);
  --btn-text: #07080c;
}
[data-theme="purpura"] {                /* Morado inclusivo y vibrante */
  --bg: #faf5ff;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #22093e;
  --muted: #6d5a86;
  --primary: #8b3dff;
  --primary-strong: #5b21b6;
  --soft: #eaddff;
  --line: rgba(139, 61, 255, .18);
  --grad-a: #8b3dff;
  --grad-b: #d946ef;
  --grad-c: #4c1d95;
  --glow: rgba(139, 61, 255, .28);
  --btn-text: #ffffff;
}
[data-theme="naranja"] {                /* Naranja cálido y energético */
  --bg: #fff8f1;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #38180a;
  --muted: #8a6a55;
  --primary: #ee7712;
  --primary-strong: #b34a08;
  --soft: #ffe4c7;
  --line: rgba(238, 119, 18, .2);
  --grad-a: #ee7712;
  --grad-b: #f6b93b;
  --grad-c: #9a3412;
  --glow: rgba(238, 119, 18, .28);
  --btn-text: #ffffff;
}
[data-theme="verde"] {                  /* Verde fresco y confiable */
  --bg: #f1faf5;
  --surface: #ffffff;
  --card: #ffffff;
  --ink: #07271a;
  --muted: #58796a;
  --primary: #0d9d63;
  --primary-strong: #04684a;
  --soft: #d3f3e2;
  --line: rgba(13, 157, 99, .2);
  --grad-a: #0d9d63;
  --grad-b: #43d69a;
  --grad-c: #065f46;
  --glow: rgba(13, 157, 99, .28);
  --btn-text: #ffffff;
}