/* === TEMA — Monitor Ventas Design System ===
 * Heredado de Monitor ML Design System v2.
 * Dual theme (light/dark) con paleta Market Paper.
 * Azul = estructura, Naranja = accin, Rojo = solo alertas.
 */

:root {
  /* Timing */
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 480ms;
  --t-theme: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Font */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  --font-size-base: 14px;

  /* Typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Compat aliases */
  --border-radius-sm: var(--r-xs);
  --border-radius-md: var(--r-md);
  --border-radius-lg: var(--r-lg);
  --border-radius-xl: var(--r-xl);
  --duration-fast: var(--t-fast);
  --duration-base: var(--t-base);
  --duration-slow: var(--t-slow);
  --ease-out-expo: var(--ease-out);
  --ease-in-out: var(--ease-smooth);
}

/* --- DARK THEME (default) --- */
[data-theme="dark"] {
  --color-bg: #0A0A0A;
  --color-surface: #141414;
  --color-surface-elevated: #1A1A1A;
  --color-surface-hover: #1F1F1F;
  --color-border: #1F1F1F;
  --color-border-strong: #2A2A2A;

  --color-text-primary: #F5F5F5;
  --color-text-secondary: #B3B3B3;
  --color-text-muted: #737373;
  --color-text-disabled: #525252;
  --color-text-inverse: #0A0A0A;

  /* Accent = azul (estructura) */
  --color-accent: #5BB0E5;
  --color-accent-hover: #7CC4F0;
  --color-accent-soft: rgba(91, 176, 229, 0.08);
  --color-accent-border: rgba(91, 176, 229, 0.25);

  /* Action = naranja (CTAs, monetario) */
  --color-warm: #F5A623;
  --color-warm-soft: rgba(245, 166, 35, 0.10);
  --color-warm-border: rgba(245, 166, 35, 0.30);

  /* Semantic */
  --color-positive: #4ADE80;
  --color-positive-soft: rgba(74, 222, 128, 0.10);
  --color-negative: #EF4444;
  --color-negative-soft: rgba(239, 68, 68, 0.10);
  --color-negative-border: rgba(239, 68, 68, 0.30);
  --color-info: #818CF8;
  --color-info-soft: rgba(129, 140, 248, 0.10);
  --color-warning: #F97316;
  --color-warning-soft: rgba(249, 115, 22, 0.10);
  --color-warning-border: rgba(249, 115, 22, 0.30);

  /* Surfaces */
  --bg-header: rgba(10, 10, 10, 0.88);
  --bg-sidebar: #111111;
  --bg-input: #1A1A1A;
  --bg-input-focus: #1F1F1F;
  --bg-badge: #1F1F1F;
  --bg-modal-overlay: rgba(0, 0, 0, 0.65);
  --bg-skeleton: linear-gradient(90deg, #1A1A1A 25%, #222 50%, #1A1A1A 75%);

  /* Sidebar */
  --sidebar-active-bg: var(--color-accent-soft);
  --sidebar-active-border: var(--color-accent);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.03);

  /* KPI */
  --kpi-icon-bg: #1A1A1A;

  /* Table */
  --table-header-bg: #111111;
  --table-row-hover: #1A1A1A;

  /* Hero */
  --hero-gradient: linear-gradient(135deg, #0A1628 0%, #0A0A0A 50%, #1A1005 100%);
  --hero-text: #F5F5F5;
  --hero-accent: #5BB0E5;

  /* Login */
  --login-gradient: linear-gradient(135deg, #0A0A0A 0%, #0A1628 50%, #1A1005 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-glow-accent: 0 0 0 3px var(--color-accent-soft);
  --shadow-glow-warm: 0 0 40px -10px rgba(245, 166, 35, 0.35);

  /* Scrollbar */
  --scrollbar-thumb: #333;
  --scrollbar-track: transparent;

  /* Theme toggle */
  --toggle-bg: #2A2A2A;
  --toggle-knob: #0A0A0A;
  --toggle-icon: #B3B3B3;
}

/* --- LIGHT THEME --- */
[data-theme="light"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #F5F5F5;
  --color-border: #E5E5E5;
  --color-border-strong: #D4D4D4;

  --color-text-primary: #0A0A0A;
  --color-text-secondary: #404040;
  --color-text-muted: #737373;
  --color-text-disabled: #A3A3A3;
  --color-text-inverse: #FAFAFA;

  --color-accent: #4A9FD9;
  --color-accent-hover: #3B8BC4;
  --color-accent-soft: rgba(74, 159, 217, 0.06);
  --color-accent-border: rgba(74, 159, 217, 0.25);

  --color-warm: #F5A623;
  --color-warm-soft: rgba(245, 166, 35, 0.08);
  --color-warm-border: rgba(245, 166, 35, 0.30);

  --color-positive: #15803D;
  --color-positive-soft: rgba(21, 128, 61, 0.08);
  --color-negative: #DC2626;
  --color-negative-soft: rgba(220, 38, 38, 0.08);
  --color-negative-border: rgba(220, 38, 38, 0.25);
  --color-info: #818CF8;
  --color-info-soft: rgba(129, 140, 248, 0.08);
  --color-warning: #EA580C;
  --color-warning-soft: rgba(234, 88, 12, 0.08);
  --color-warning-border: rgba(234, 88, 12, 0.25);

  --bg-header: rgba(255, 255, 255, 0.82);
  --bg-sidebar: #FFFFFF;
  --bg-input: #F5F5F5;
  --bg-input-focus: #FFFFFF;
  --bg-badge: #F0F0F0;
  --bg-modal-overlay: rgba(0, 0, 0, 0.4);
  --bg-skeleton: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%);

  --sidebar-active-bg: var(--color-accent-soft);
  --sidebar-active-border: var(--color-accent);
  --sidebar-hover-bg: rgba(0, 0, 0, 0.03);

  --kpi-icon-bg: #F5F5F5;

  --table-header-bg: #FAFAFA;
  --table-row-hover: #FAFAFA;

  --hero-gradient: linear-gradient(135deg, #1A3A5C 0%, #0F2640 50%, #2A1A05 100%);
  --hero-text: #FAFAFA;
  --hero-accent: #4A9FD9;

  --login-gradient: linear-gradient(135deg, #FFF 0%, #EBF4FC 50%, #FFF7ED 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-glow-accent: 0 0 0 3px var(--color-accent-soft);
  --shadow-glow-warm: 0 0 40px -10px rgba(245, 166, 35, 0.2);

  --scrollbar-thumb: #D4D4D4;
  --scrollbar-track: transparent;

  --toggle-bg: #E5E5E5;
  --toggle-knob: #FFFFFF;
  --toggle-icon: #737373;
}