/* Design tokens de MOVAI — heredados del dashboard de Replai.
   Nunca usar colores fuera de estas variables. */

:root {
  --bg-base:        #0B0F17;
  --bg-surface:     #111827;
  --bg-card:        #1B2433;
  --bg-hover:       #212C3F;
  --bg-input:       #0F1622;
  --bg-overlay:     rgba(3, 6, 12, 0.6);

  --border:         rgba(255,255,255,0.06);
  --border-light:   rgba(255,255,255,0.10);
  --border-blue:    rgba(37,99,255,0.30);
  --border-glow:    rgba(37,99,255,0.60);

  --accent:         #2563FF;
  --accent-hover:   #1E4FD8;
  --accent-light:   #7A8CFF;
  --accent-dim:     rgba(37,99,255,0.15);
  --accent-faint:   rgba(37,99,255,0.08);
  --cyan:           #22D3EE;

  --green:          #10B981;
  --green-text:     #6EE7B7;
  --green-dim:      rgba(16,185,129,0.14);
  --amber:          #F59E0B;
  --amber-text:     #FCD34D;
  --amber-dim:      rgba(245,158,11,0.14);
  --red:            #EF4444;
  --red-text:       #FCA5A5;
  --red-dim:        rgba(239,68,68,0.14);
  --purple:         #8B5CF6;
  --purple-text:    #C4B5FD;
  --purple-dim:     rgba(139,92,246,0.14);
  --slate-dim:      rgba(148,163,184,0.12);

  --whatsapp:       #25D366;
  --whatsapp-dim:   rgba(37,211,102,0.12);
  --instagram:      #E1306C;
  --instagram-dim:  rgba(225,48,108,0.12);

  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-on-accent: #FFFFFF;

  --hover-subtle:   rgba(255,255,255,0.03);
  --ring:           0 0 0 3px rgba(37,99,255,0.18);
  --shadow-hover:   0 4px 16px rgba(0,0,0,0.30);
  --shadow-modal:   0 8px 32px rgba(0,0,0,0.40);
  --glow-blue:      0 0 20px rgba(37,99,255,0.15);
  --glow-blue-strong: 0 4px 12px rgba(37,99,255,0.30);
  --glow-green:     0 0 20px rgba(16,185,129,0.10);
  --shadow-blue:    0 0 24px rgba(37,99,255,0.15);
  --periwinkle:     #7A8CFF;
  --border-hover:   rgba(255,255,255,0.10);
  --border-btn:     rgba(255,255,255,0.14);
  --bubble-in:      var(--bg-hover);
  --bubble-agent:   rgba(37,99,255,0.20);
  --bubble-agent-b: rgba(37,99,255,0.18);
  --bubble-team:    rgba(37,99,255,0.30);
  --bubble-team-b:  rgba(37,99,255,0.25);

  --gradient-card:    linear-gradient(135deg, #1B2433 0%, #212C3F 100%);
  --gradient-accent:  linear-gradient(135deg, #2563FF 0%, #22D3EE 100%);
  --gradient-sidebar: linear-gradient(180deg, #10151F 0%, #0B0F17 100%);
  --logo-fill:        linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 78%, #22D3EE 100%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 99px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-normal: 220ms var(--ease);

  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;

  --sidebar-w: 240px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-base:        #F1F5F9;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-hover:       #F1F5F9;
  --bg-input:       #F8FAFC;
  --bg-overlay:     rgba(15, 23, 42, 0.35);
  --border:         rgba(15,23,42,0.08);
  --border-light:   rgba(15,23,42,0.14);
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;
  --green-text:     #047857;
  --amber-text:     #B45309;
  --red-text:       #B91C1C;
  --purple-text:    #6D28D9;
  --hover-subtle:   rgba(15,23,42,0.03);
  --border-hover:   rgba(15,23,42,0.14);
  --border-btn:     rgba(15,23,42,0.16);
  --bubble-in:      #EEF2F7;
  --bubble-agent:   rgba(37,99,255,0.10);
  --bubble-agent-b: rgba(37,99,255,0.14);
  --bubble-team:    rgba(37,99,255,0.16);
  --bubble-team-b:  rgba(37,99,255,0.22);
  --shadow-hover:   0 4px 16px rgba(15,23,42,0.08);
  --shadow-modal:   0 8px 32px rgba(15,23,42,0.16);
  --gradient-card:    linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  --gradient-sidebar: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --logo-fill:        linear-gradient(135deg, #0F172A 0%, #0F172A 78%, #0EA5E9 100%);
  color-scheme: light;
}