/*
 * Sistema de tema compartido para todas las apps del SaaS
 * Inyectado vía web_include_css — disponible en todas las páginas web.
 *
 * Tokens: --app-* (superficies, texto, acento, semánticos, sombras, radios).
 * Modo oscuro: activar con document.documentElement.dataset.theme = 'dark'.
 */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --app-bg: #ffffff;
  --app-surface: #ffffff;
  --app-surface-2: #f3f4f7;
  --app-surface-3: #e5e7eb;

  /* Text */
  --app-text: #1f232a;
  --app-text-2: #5b6472;
  --app-text-3: #97a0ae;
  --app-text-inverse: #ffffff;

  /* Borders */
  --app-border: #ebedf2;
  --app-border-2: #f3f4f7;
  --app-border-strong: #d1d5db;

  /* Accent (marca unificada) */
  --app-accent: #5e64ff;
  --app-accent-hover: #4b52e5;
  --app-accent-bg: #eef0ff;
  --app-accent-2: #2ec4b6;
  --app-accent-2-bg: #e0f7f4;

  /* Semantic colors */
  --app-success: #16a34a;
  --app-success-bg: #f0fdf4;
  --app-warning: #d97706;
  --app-warning-bg: #fef3c7;
  --app-danger: #dc2626;
  --app-danger-bg: #fef2f2;
  --app-info: #0284c7;
  --app-info-bg: #e0f2fe;

  /* Shadows */
  --app-shadow-soft: 0 1px 1px rgba(17, 24, 39, 0.04), 0 2px 6px rgba(17, 24, 39, 0.05), 0 8px 24px rgba(17, 24, 39, 0.05);
  --app-shadow-card: 0 1px 1px rgba(17, 24, 39, 0.03), 0 1px 3px rgba(17, 24, 39, 0.04), 0 4px 10px rgba(17, 24, 39, 0.04);
  --app-shadow-hover: 0 2px 4px rgba(17, 24, 39, 0.06), 0 8px 24px rgba(17, 24, 39, 0.1);

  /* Overlays — para drawer backdrops, popovers */
  --app-overlay: rgba(17, 24, 39, 0.35);
  --app-overlay-soft: rgba(17, 24, 39, 0.15);

  /* Radius */
  --app-radius-sm: 8px;
  --app-radius: 10px;
  --app-radius-lg: 14px;

  /* Typography */
  --app-font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --app-font-display: 'Geist', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Motion */
  --app-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --app-ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — base neutral oscura con toque azulado */
  --app-bg: #0f1115;
  --app-surface: #171a20;
  --app-surface-2: #1f232a;
  --app-surface-3: #262a31;

  /* Text */
  --app-text: #e6e8ec;
  --app-text-2: #a0a6af;
  --app-text-3: #6b7280;
  --app-text-inverse: #0f1115;

  /* Borders */
  --app-border: #262a31;
  --app-border-2: #1d2026;
  --app-border-strong: #3a3f47;

  /* Accent (ligeramente más claro para contraste sobre fondo oscuro) */
  --app-accent: #8b90ff;
  --app-accent-hover: #a1a6ff;
  --app-accent-bg: rgba(139, 144, 255, 0.15);
  --app-accent-2: #4fd3c4;
  --app-accent-2-bg: rgba(79, 211, 196, 0.15);

  /* Semantic — versiones desaturadas para dark mode */
  --app-success: #4ade80;
  --app-success-bg: rgba(74, 222, 128, 0.12);
  --app-warning: #fbbf24;
  --app-warning-bg: rgba(251, 191, 36, 0.12);
  --app-danger: #f87171;
  --app-danger-bg: rgba(248, 113, 113, 0.12);
  --app-info: #38bdf8;
  --app-info-bg: rgba(56, 189, 248, 0.12);

  /* Shadows más sutiles sobre fondo oscuro */
  --app-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --app-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);

  /* Overlays más densos en dark (mejor contraste con surface) */
  --app-overlay: rgba(0, 0, 0, 0.6);
  --app-overlay-soft: rgba(0, 0, 0, 0.35);
  --app-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Scrollbar styling — sutil, respeta el tema */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--app-border-strong);
  border-radius: 5px;
  border: 2px solid var(--app-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--app-text-3);
}

/* Transiciones suaves al cambiar de tema */
html {
  transition: background-color 0.2s var(--app-ease);
}
body {
  transition: background-color 0.2s var(--app-ease), color 0.2s var(--app-ease);
}