/* Colores de Tareas QuickSoft1: 1º morado Hostinger (acento), 2º verde (éxito), 3º naranja QuickSoft1 (atención).
   Reglas sin @layer: ganan a las de Nuxt UI. El "Tema propio" de cada usuario sigue ganando (más específico). */
:root {
  --ui-color-primary-50: #f5f2ff;
  --ui-color-primary-100: #ebe4ff;
  --ui-color-primary-200: #d6c9ff;
  --ui-color-primary-300: #b8a3ff;
  --ui-color-primary-400: #8c85ff;
  --ui-color-primary-500: #673de6;
  --ui-color-primary-600: #5025d1;
  --ui-color-primary-700: #4119b0;
  --ui-color-primary-800: #34148c;
  --ui-color-primary-900: #2f1c6a;
  --ui-color-primary-950: #1e1145;

  --ui-color-warning-50: #fef6ec;
  --ui-color-warning-100: #fdebd3;
  --ui-color-warning-200: #fad2a2;
  --ui-color-warning-300: #f6b366;
  --ui-color-warning-400: #f09a39;
  --ui-color-warning-500: #e8820c;
  --ui-color-warning-600: #c96d06;
  --ui-color-warning-700: #a05409;
  --ui-color-warning-800: #80430e;
  --ui-color-warning-900: #68380f;
  --ui-color-warning-950: #3b1c05;

  --color-zinc-50: #f4f5ff;
  --color-zinc-100: #ebecf7;
  --color-zinc-200: #dadce0;
  --color-zinc-300: #c3c4d4;
  --color-zinc-400: #9c9bb3;
  --color-zinc-500: #727186;
  --color-zinc-600: #56556b;
  --color-zinc-700: #36344d;
  --color-zinc-800: #2a2840;
  --color-zinc-900: #1d1e2c;
  --color-zinc-950: #121220;
}

/* Barra lateral morada sólida (como Hostinger). Dentro de ella se redefinen los colores
   para que texto, bordes y lo seleccionado se lean sobre el morado. */
[class~="bg-elevated/25"] {
  background-color: #5025d1;
  --ui-text: #f4f1ff;
  --ui-text-highlighted: #ffffff;
  --ui-text-toned: #e6defe;
  --ui-text-muted: #d6c9ff;
  --ui-text-dimmed: #b8a3ff;
  --ui-primary: #ffffff;
  --ui-border: rgb(255 255 255 / 0.18);
  --ui-border-muted: rgb(255 255 255 / 0.12);
  --ui-border-accented: rgb(255 255 255 / 0.28);
  --ui-bg-elevated: rgb(255 255 255 / 0.12);
  --ui-bg-accented: rgb(255 255 255 / 0.18);
  --ui-bg-muted: rgb(255 255 255 / 0.08);
}

/* Botones principales (sólidos) en naranja QuickSoft1. Interruptores y casillas siguen morados. */
button.bg-primary,
a.bg-primary {
  background-color: #e8820c;
  color: #1d1e2c;
}
button.bg-primary:hover:not(:disabled),
a.bg-primary:hover {
  background-color: #f09a39;
}
button.bg-primary:focus-visible,
a.bg-primary:focus-visible {
  outline-color: #e8820c;
}