/**
 * Tema Dinámico - Generado por Docker
 * Color primario configurado via THEME_PRIMARY_COLOR
 */

:root {
  /* === COLOR PRIMARIO BASE === */
  --color-primary-base: #a9d65f;

  /* === PALETA PRIMARIA (generada con color-mix) === */
  --color-primary-50:  color-mix(in srgb, var(--color-primary-base) 5%, white);
  --color-primary-100: color-mix(in srgb, var(--color-primary-base) 15%, white);
  --color-primary-200: color-mix(in srgb, var(--color-primary-base) 35%, white);
  --color-primary-300: color-mix(in srgb, var(--color-primary-base) 55%, white);
  --color-primary-400: color-mix(in srgb, var(--color-primary-base) 75%, white);
  --color-primary-500: var(--color-primary-base);
  --color-primary-600: color-mix(in srgb, var(--color-primary-base) 85%, black);
  --color-primary-700: color-mix(in srgb, var(--color-primary-base) 70%, black);
  --color-primary-800: color-mix(in srgb, var(--color-primary-base) 55%, black);
  --color-primary-900: color-mix(in srgb, var(--color-primary-base) 40%, black);

  /* Sobrescribir variables existentes */
  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-200);
  --color-primary-dark: var(--color-primary-700);

  /* === SIDEBAR (usa color primario oscuro) === */
  --color-sidebar-active: var(--color-primary-700);

  /* === FOCUS === */
  --focus-ring-color: var(--color-primary);
}

/* Sobrescribir estilos de focus para usar el nuevo color */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}