/* =========================================
   1. VARIABLES & THEME SETUP
   ========================================= */
:root {
  /* Premium Dark Theme Palette (DEFAULT) */
  --color-bg-main: #0a0a12; /* Very dark blue-black */
  --color-bg-secondary: #11111f;
  --color-bg-card: rgba(30, 30, 45, 0.6);

  --color-text-main: #ffffff;
  --color-text-muted: #94a3b8;

  --color-primary: #7c3aed; /* Violet/Purple */
  --color-primary-glow: rgba(124, 58, 237, 0.5);

  --color-accent: #ffd700; /* Gold */
  --color-accent-glow: rgba(255, 215, 0, 0.3);

  --font-main: "Outfit", sans-serif;
  --font-display: "Playfair Display", serif; /* For premium headers */

  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  --radius-lg: 16px;
  --radius-md: 12px;
}

/* Light Theme Override */
:root[data-theme="light"] {
  --color-bg-main: #f8fafc;
  --color-bg-secondary: #f1f5f9;
  --color-bg-card: rgba(255, 255, 255, 0.8);

  --color-text-main: #0f172a;
  --color-text-muted: #64748b;

  --color-primary: #7c3aed;
  --color-primary-glow: rgba(124, 58, 237, 0.3);

  --color-accent: #f59e0b;
  --color-accent-glow: rgba(245, 158, 11, 0.2);

  --border-glass: 1px solid rgba(0, 0, 0, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
}

/* =========================================
   2. GLOBAL RESET & TYPOGRAPHY
   ========================================= */
body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: var(--font-main);
  overflow-x: hidden;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--color-bg-secondary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* =========================================
   3. UTILITIES & ANIMATIONS
   ========================================= */

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-glass);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.glass:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Premium Text Gradients */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #ffd700 0%, #fdb931 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-primary {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animations */
.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
}

.animate-delay-100 {
  animation-delay: 0.1s;
}
.animate-delay-200 {
  animation-delay: 0.2s;
}
.animate-delay-300 {
  animation-delay: 0.3s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.02);
}

/* =========================================
   4. COMPONENT SPECIFIC
   ========================================= */

/* Cards */
.card-premium {
  /* glass */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--border-glass);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* rounded-2xl */
  border-radius: 1rem;
  /* overflow-hidden */
  overflow: hidden;
  /* transition-all duration-300 */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.card-premium:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -5px rgba(124, 58, 237, 0.15);
  border-color: var(--color-primary-glow);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.39);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.23);
  filter: brightness(110%);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 500;
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* Hero Section Backgrounds */
.bg-hero-mesh {
  background-color: var(--color-bg-main);
  background-image: radial-gradient(
      at 0% 0%,
      hsla(253, 16%, 7%, 1) 0,
      transparent 50%
    ),
    radial-gradient(at 50% 0%, hsla(225, 39%, 30%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(339, 49%, 30%, 1) 0, transparent 50%);
}

[data-theme="light"] .bg-hero-mesh {
  background-image: radial-gradient(
      at 0% 0%,
      hsla(253, 16%, 95%, 1) 0,
      transparent 50%
    ),
    radial-gradient(at 50% 0%, hsla(225, 39%, 90%, 1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(339, 49%, 90%, 1) 0, transparent 50%);
}

.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}