@import "tailwindcss";

:root {
  --nexus-bg: #ffffff;
  --nexus-bg-alt: #f8fafc;
  --nexus-surface: rgba(255, 255, 255, 0.72);
  --nexus-purple: #9333ea;
  --nexus-purple-light: #a855f7;
  --nexus-cyan: #06b6d4;
  --nexus-cyan-light: #22d3ee;
  --nexus-navy: #0f172a;
  --nexus-muted: #64748b;
  --nexus-border: rgba(15, 23, 42, 0.08);
  --nexus-radius: 1.5rem;
  --nexus-glow-purple: rgba(168, 85, 247, 0.3);
  --nexus-glow-cyan: rgba(6, 182, 212, 0.3);
  --gradient-brand: linear-gradient(135deg, #9333ea 0%, #a855f7 45%, #06b6d4 100%);
}

@theme inline {
  --color-nexus-bg: var(--nexus-bg);
  --color-nexus-bg-alt: var(--nexus-bg-alt);
  --color-nexus-purple: var(--nexus-purple);
  --color-nexus-purple-light: var(--nexus-purple-light);
  --color-nexus-cyan: var(--nexus-cyan);
  --color-nexus-cyan-light: var(--nexus-cyan-light);
  --color-nexus-navy: var(--nexus-navy);
  --color-nexus-muted: var(--nexus-muted);
  --color-nexus-border: var(--nexus-border);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--nexus-bg-alt);
  color: var(--nexus-navy);
  font-family: var(--font-geist-sans), "Segoe UI", system-ui, sans-serif;
}

.glass {
  background: var(--nexus-surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--nexus-border);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 40px rgba(15, 23, 42, 0.06);
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.glass-hover:hover {
  border-color: rgba(168, 85, 247, 0.2);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.12),
    0 8px 32px var(--nexus-glow-purple),
    0 12px 40px var(--nexus-glow-cyan);
}

.glow-brand {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.18),
    0 8px 32px var(--nexus-glow-purple),
    0 4px 24px var(--nexus-glow-cyan);
}

.text-brand-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-brand {
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 600;
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.btn-brand:hover {
  opacity: 0.92;
  box-shadow:
    0 4px 20px var(--nexus-glow-purple),
    0 2px 12px var(--nexus-glow-cyan);
}

.btn-brand-outline {
  border: 1px solid var(--nexus-border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--nexus-navy);
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.btn-brand-outline:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.12);
}

.link-brand {
  color: var(--nexus-purple);
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.link-brand:hover {
  color: var(--nexus-cyan);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--nexus-purple-light);
  outline-offset: 2px;
}
