/*
 * Leapable Design System — shared CSS for all creator dashboard views.
 *
 * Based on Steve's LEAPABLE-UI-PRD.md spec + in-HTML tailwind config in
 * docs/steveupdatefrontend/leapable-ui-code/leapable-ui/index.html.
 *
 * Imported by every page before Tailwind CDN so the custom properties
 * apply. Tailwind CDN is used for rapid utility styling — in production
 * this would compile to a static sheet, but for the MVP the CDN + this
 * file is the clean path.
 */

:root {
  --color-background: #09090b;
  --color-surface: #18181b;
  --color-surface-2: #12121a;
  --color-primary: #7c3aed;
  --color-primary-light: #a78bfa;
  --color-primary-dark: #5b21b6;
  --color-text-primary: #f8f8ff;
  --color-text-secondary: #9ca3af;
  --color-accent: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
}

html, body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: #2d2d3b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Glass card — the core component from Steve's design */
.glass-card {
  background: rgba(18, 18, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  border-radius: 0.75rem;
}
.glass-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Nav items */
.nav-item {
  position: relative;
  transition: all 0.2s ease;
  color: var(--color-text-secondary);
}
.nav-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  height: 100%;
  width: 3px;
  background: var(--color-primary);
  transform: scaleY(0);
  transition: transform 0.2s ease;
  border-radius: 0 4px 4px 0;
}
.nav-item.active {
  color: var(--color-primary-light);
  background: rgba(124, 58, 237, 0.1);
}
.nav-item.active::before { transform: scaleY(1); }
.nav-item:hover:not(.active) {
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
}

/* Primary button with brand glow */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.6);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Modal glass background */
.modal-glass {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.trend-up { color: var(--color-accent); }
.trend-down { color: var(--color-danger); }
.trend-flat { color: var(--color-text-secondary); }

.heat-3 { color: #ef4444; text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.heat-2 { color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.heat-1 { color: #10b981; }

/* Glow hover border used on CTAs */
.glow-border { position: relative; }
.glow-border::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  background: linear-gradient(45deg, rgba(124, 58, 237, 0.5), transparent, rgba(124, 58, 237, 0.5));
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.glow-border:hover::after { opacity: 1; }

/* AI pulse animation for live indicators */
@keyframes aiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.08); }
}
.ai-pulse { animation: aiPulse 2s ease-in-out infinite; }

/* Toast container */
.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(16, 185, 129, 0.5); }
.toast.error { border-color: rgba(239, 68, 68, 0.5); }

/* Utility classes used in place of full tailwind arbitrary values */
.text-primary-light { color: var(--color-primary-light); }
.text-primary { color: var(--color-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.bg-surface { background-color: var(--color-surface); }
.bg-background { background-color: var(--color-background); }
.border-white-5 { border-color: rgba(255, 255, 255, 0.05); }