@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================
   CSS Custom Properties (Fonts)
   ============================================ */

:root {
  --font-outfit: 'Outfit', system-ui, sans-serif;
  --font-inter: 'Inter', system-ui, sans-serif;
}

/* ============================================
   Base Styles
   ============================================ */

@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.2);
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 9999px;
  }

  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.65), rgba(37, 99, 235, 0.65));
    border-radius: 9999px;
    border: 2px solid rgba(15, 23, 42, 0.2);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    @apply bg-bg-primary text-text-primary font-body;
    min-height: 100vh;
  }

  h1, h2, h3, h4 {
    @apply font-heading font-bold;
  }
}

/* ============================================
   Custom Components
   ============================================ */

@layer components {
  /* Glass card effect */
  .glass {
    @apply bg-bg-secondary/50 backdrop-blur-xl border border-accent/15 rounded-xl;
  }
  
  /* Button variants */
  .btn {
    @apply inline-flex items-center justify-center gap-2 min-h-[44px] px-6 py-3 
           font-semibold rounded-lg transition-all duration-250 whitespace-nowrap;
  }
  
  .btn-primary {
    @apply btn bg-accent text-white shadow-glow 
           hover:bg-accent-dark hover:-translate-y-0.5 hover:shadow-glow-lg;
  }
  
  .btn-secondary {
    @apply btn bg-text-secondary/10 text-text-primary border border-text-secondary/15
           hover:bg-text-secondary/15 hover:border-accent-light;
  }
  
  .btn-ghost {
    @apply btn text-text-secondary px-3 py-1
           hover:text-text-primary hover:bg-text-secondary/10;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-sm min-h-[36px];
  }
  
  .btn-full {
    @apply w-full;
  }
  
  .btn-loading .btn-text {
    @apply hidden;
  }
  
  /* Section styles */
  .section {
    @apply py-12;
  }
  
  @media (min-width: 768px) {
    .section {
      @apply py-16;
    }
  }
  
  .section-header {
    @apply text-center mb-10;
  }
  
  .section-tag {
    @apply inline-block text-xs font-semibold uppercase tracking-wider
           text-accent-light bg-accent/10 px-3 py-1.5 rounded-md mb-2;
  }
  
  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl mb-2;
  }
  
  .section-subtitle {
    @apply text-base md:text-lg text-text-secondary max-w-[500px] mx-auto;
  }
  
  /* Container */
  .container-custom {
    @apply w-full max-w-container mx-auto px-6;
  }
  
  /* Focus ring */
  .focus-ring {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40;
  }
}

/* ============================================
   Utilities
   ============================================ */

@layer utilities {
  .glass-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
  }

  .text-gradient {
    @apply text-accent-light;
  }
  
  .animate-draw {
    animation: draw 1.5s ease-out forwards;
  }
  
  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-soft {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.2);
  }

  .scrollbar-soft::-webkit-scrollbar {
    width: 10px;
  }

  .scrollbar-soft::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.2);
    border-radius: 9999px;
  }

  .scrollbar-soft::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.65), rgba(37, 99, 235, 0.65));
    border-radius: 9999px;
    border: 2px solid rgba(15, 23, 42, 0.2);
  }

  .scrollbar-soft::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
  }
}

/* ============================================
   Background Animation
   ============================================ */

.bg-animation {
  @apply fixed inset-0 pointer-events-none z-0 overflow-hidden;
}

.bg-gradient {
  @apply absolute rounded-full blur-[120px] opacity-25 animate-float;
}

.bg-gradient--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
  top: -150px;
  right: -100px;
}

.bg-gradient--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, transparent 70%);
  bottom: -100px;
  left: -80px;
  animation-delay: -5s;
}

.bg-grid {
  @apply absolute inset-0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.02;
}