/* ToolSwitcher — AI-Generated Design Tokens */
:root {
  --color-primary-1: #7C3AED;
  --color-primary-2: #8B5CF6;
  --color-primary-3: #A78BFA;
  --color-primary-4: #C4B5FD;
  --color-accent-1: #10B981;
  --color-accent-2: #06B6D4;
  --color-bg: #09090B;
  --color-surface: #18181B;
  --color-surface-2: #27272A;
  --color-border: rgba(139,92,246,0.2);
  --color-text: #FAFAFA;
  --color-muted: #A1A1AA;
  --color-accent: #8B5CF6;

  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 5rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.7);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.6);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(139,92,246,0.35);
  --shadow-glow-lg: 0 0 50px rgba(139,92,246,0.4);

  --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base: 300ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 500ms cubic-bezier(0.4,0,0.2,1);
}

/* Aceternity-style glowing border */
.glow-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.glow-card:hover { border-color: rgba(139,92,246,0.5); }
.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(139,92,246,0.08), transparent 60%);
  pointer-events: none;
}

/* Sparkles background */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1); }
}
.sparkle-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary-3);
  animation: sparkle 2s infinite;
}

/* Tracing beam */
@keyframes trace {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
.tracing-beam::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 20%;
  background: linear-gradient(to bottom, transparent, var(--color-primary-2), transparent);
  animation: trace 3s infinite ease-in-out;
}

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-glow);
}