/* ===== TEMA CLÁSICO (por defecto) ===== */
[data-openiis-theme="classic"] {
  /* Colores principales - Paleta Teal Elegante */
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;

  /* Neutros elegantes */
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* Sistema de colores semánticos */
  --color-background: #ffffff;
  --color-surface: #fafafa;
  --color-surface-elevated: #ffffff;
  --color-border: #e5e5e5;
  --color-border-focus: #14b8a6;
  --color-text-primary: #171717;
  --color-text-secondary: #525252;
  --color-text-muted: #a3a3a3;
  --color-text-inverse: #ffffff;

  /* Estados modernos */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
}

/* Ajuste específico de colores de borde focus para tema oscuro */
[data-openiis-theme="classic"][data-theme="dark"] {
  --color-border-focus: #2dd4bf;
  /* Sistema de colores para tema oscuro */
  --color-background: #0f0f0f;
  --color-surface: #171717;
  --color-surface-elevated: #262626;
  --color-border: #404040;
  --color-text-primary: #fafafa;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #737373;
  --color-text-inverse: #171717;

  /* Sombras para tema oscuro */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.15);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.18), 0 1px 2px -1px rgb(0 0 0 / 0.15);
  --shadow-md:
    0 2px 4px -1px rgb(0 0 0 / 0.2), 0 1px 3px -1px rgb(0 0 0 / 0.18);
  --shadow-lg:
    0 4px 8px -2px rgb(0 0 0 / 0.22), 0 2px 4px -1px rgb(0 0 0 / 0.18);
  --shadow-xl:
    0 8px 16px -4px rgb(0 0 0 / 0.25), 0 4px 8px -2px rgb(0 0 0 / 0.2);
}

/* Ejemplo de uso de variables */
.ejemplo {
  background-color: var(--color-background);
  color: var(--color-text-secondary);
}