@import "tailwindcss";
@config "../../../tailwind.config.js";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;

    /* Purple primary - #6B46C1 */
    --primary: 259 69% 52%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 259 69% 62%;
    --primary-dark: 259 69% 42%;

    /* Cool secondary */
    --secondary: 214 32% 91%;
    --secondary-foreground: 215 25% 15%;

    --muted: 214 32% 95%;
    --muted-foreground: 215 16% 47%;

    --accent: 259 69% 62%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 259 69% 52%;

    --radius: 0.75rem;

    /* Custom gradients */
    --gradient-primary: linear-gradient(
      135deg,
      hsl(var(--primary)),
      hsl(var(--primary-light))
    );
    --gradient-hero: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--accent)) 100%
    );
    --gradient-feature: linear-gradient(
      180deg,
      hsl(var(--background)) 0%,
      hsl(var(--muted)) 100%
    );

    /* Shadows - delve.co inspired */
    --shadow-soft:
      0 1px 3px 0 hsl(var(--primary) / 0.1),
      0 1px 2px 0 hsl(var(--primary) / 0.06);
    --shadow-medium:
      0 4px 6px -1px hsl(var(--primary) / 0.1),
      0 2px 4px -1px hsl(var(--primary) / 0.06);
    --shadow-large:
      0 10px 15px -3px hsl(var(--primary) / 0.1),
      0 4px 6px -2px hsl(var(--primary) / 0.05);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 215 28% 10%;
    --foreground: 210 20% 95%;

    --card: 215 28% 12%;
    --card-foreground: 210 20% 95%;

    --popover: 215 28% 12%;
    --popover-foreground: 210 20% 95%;

    --primary: 259 69% 52%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 259 69% 62%;
    --primary-dark: 259 69% 42%;

    --secondary: 215 25% 18%;
    --secondary-foreground: 210 20% 95%;

    --muted: 215 25% 16%;
    --muted-foreground: 215 16% 65%;

    --accent: 259 69% 62%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 25% 18%;
    --input: 215 25% 18%;
    --ring: 259 69% 52%;

    --gradient-primary: linear-gradient(
      135deg,
      hsl(var(--primary)),
      hsl(var(--primary-light))
    );
    --gradient-hero: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--accent)) 100%
    );
    --gradient-feature: linear-gradient(
      180deg,
      hsl(var(--background)) 0%,
      hsl(var(--muted)) 100%
    );

    /* Dark mode shadows */
    --shadow-soft:
      0 1px 3px 0 hsl(0 0% 0% / 0.3), 0 1px 2px 0 hsl(0 0% 0% / 0.2);
    --shadow-medium:
      0 4px 6px -1px hsl(0 0% 0% / 0.3), 0 2px 4px -1px hsl(0 0% 0% / 0.2);
    --shadow-large:
      0 10px 15px -3px hsl(0 0% 0% / 0.3), 0 4px 6px -2px hsl(0 0% 0% / 0.2);

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold tracking-tight;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Mobile optimization */
  @media (max-width: 768px) {
    .container {
      @apply px-4;
    }
  }
}

@layer components {
  .gradient-bg {
    background: var(--gradient-hero);
  }

  .feature-card {
    @apply bg-card border border-border rounded-xl p-6 shadow-[var(--shadow-soft)] hover:shadow-[var(--shadow-medium)] transition-all duration-300 hover:-translate-y-1;
  }

  .cta-button {
    @apply bg-primary text-primary-foreground hover:bg-primary-dark px-8 py-3 rounded-lg font-medium transition-all duration-200 shadow-[var(--shadow-medium)] hover:shadow-[var(--shadow-large)] hover:-translate-y-0.5;
  }

  /* Mobile-first responsive utilities */
  .mobile-padding {
    @apply px-4 sm:px-6 lg:px-8;
  }

  .mobile-text {
    @apply text-sm sm:text-base;
  }

  .mobile-heading {
    @apply text-2xl sm:text-3xl lg:text-4xl;
  }

  /* Dark mode transitions */
  .dark-transition {
    @apply transition-colors duration-300 ease-in-out;
  }

  /* Blog Content Styling */
  .blog-content {
    @apply text-foreground leading-relaxed;
  }

  .blog-content h1 {
    @apply text-4xl font-bold text-foreground mt-12 mb-6 pb-3 border-b border-border;
  }

  .blog-content h2 {
    @apply text-3xl font-semibold text-foreground mt-10 mb-5 scroll-mt-24;
  }

  .blog-content h3 {
    @apply text-2xl font-semibold text-foreground mt-8 mb-4 scroll-mt-24;
  }

  .blog-content h4 {
    @apply text-xl font-semibold text-foreground mt-6 mb-3;
  }

  .blog-content p {
    @apply text-muted-foreground mb-6 leading-relaxed text-lg;
  }

  .blog-content ul {
    @apply mb-6 space-y-2 pl-6;
  }

  .blog-content ol {
    @apply mb-6 space-y-2 pl-6;
  }

  .blog-content li {
    @apply text-muted-foreground leading-relaxed text-lg relative;
  }

  .blog-content ul li {
    @apply before:content-['•'] before:text-primary before:font-bold before:absolute before:-left-6 before:top-0;
  }

  .blog-content ol li {
    @apply list-decimal;
  }

  .blog-content blockquote {
    @apply border-l-4 border-primary bg-primary/5 pl-6 py-4 my-8 italic text-foreground font-medium text-lg rounded-r-lg;
  }

  .blog-content blockquote p {
    @apply mb-0 text-foreground;
  }

  .blog-content a {
    @apply text-primary hover:text-primary-dark underline decoration-primary/30 hover:decoration-primary transition-colors;
  }

  .blog-content code {
    @apply bg-muted px-2 py-1 rounded text-sm font-mono text-accent;
  }

  .blog-content pre {
    @apply bg-muted p-4 rounded-lg overflow-x-auto mb-6;
  }

  .blog-content pre code {
    @apply bg-transparent p-0 text-foreground;
  }

  .blog-content strong {
    @apply font-semibold text-foreground;
  }

  .blog-content em {
    @apply italic text-foreground;
  }

  .blog-content img {
    @apply rounded-lg shadow-lg my-8 w-full;
  }

  .blog-content hr {
    @apply border-border my-8;
  }

  .blog-content table {
    @apply w-full border-collapse border border-border my-8;
  }

  .blog-content th {
    @apply border border-border px-4 py-2 bg-muted font-semibold text-foreground text-left;
  }

  .blog-content td {
    @apply border border-border px-4 py-2 text-muted-foreground;
  }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/50;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* FAQ Accordion Styles */
.faq-accordion-content {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

.faq-accordion-chevron {
  transition: transform 0.2s ease-in-out;
}

[data-state="open"] .faq-accordion-chevron {
  transform: rotate(180deg);
}

/* Enhanced accordion animations */
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.accordion-content[data-state="open"] {
  animation: accordion-down 0.3s ease-out;
}

.accordion-content[data-state="closed"] {
  animation: accordion-up 0.3s ease-out;
}

/* Lazy Background Loading Styles */
.bg-loaded {
  @apply transition-all duration-500 ease-in-out;
}

/* Hero section specific styles */
#home {
  transition: background-image 0.8s ease-in-out;
  background-attachment: fixed;
  /* Loading state with subtle pattern */
  background-image:
    radial-gradient(
      circle at 20% 80%,
      rgba(107, 70, 193, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(107, 70, 193, 0.05) 0%,
      transparent 50%
    );
}

/* Smooth fade-in when background loads */
#home.bg-loaded {
  background-blend-mode: normal;
}

/* Performance optimizations */
#home {
  will-change: background-image;
  transform: translateZ(0); /* GPU acceleration */
}

@media (max-width: 768px) {
  #home {
    background-attachment: scroll; /* Better performance on mobile */
    /* Reduce motion for mobile devices */
    transition: background-image 0.3s ease-out;
  }
}

/* Preload critical background with low quality placeholder */
@media (min-width: 769px) {
  #home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #070107 0%, #1a0f1a 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
    z-index: -1;
  }
}

/* Error state for failed background image loads */
#home.bg-error {
  background-image:
    linear-gradient(135deg, #070107 0%, #2a1a2a 50%, #070107 100%),
    radial-gradient(
      circle at 30% 70%,
      rgba(107, 70, 193, 0.1) 0%,
      transparent 60%
    );
  background-blend-mode: overlay;
}