@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

@layer base {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
  }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    @apply bg-surface-light text-primary-500 antialiased;
  }
  .dark body {
    @apply bg-surface-dark text-gray-100;
  }
  ::selection {
    @apply bg-secondary-500/30 text-primary-700;
  }
  .dark ::selection {
    @apply bg-accent-500/40 text-white;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight;
    line-height: 1.15;
  }
  /* Custom scrollbar — brand gradient thumb */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { @apply bg-transparent; }
  ::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: linear-gradient(180deg, #2979FF, #E91E8C);
  }
  .dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #438EFF, #EE4EA4);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1456D6, #C41873);
  }
}

@layer components {
  .glass {
    @apply backdrop-blur-xl bg-white/70 border border-white/60;
  }
  .dark .glass {
    @apply bg-white/5 border-white/10;
  }
  .glass-strong {
    @apply backdrop-blur-2xl bg-white/85 border border-white/70;
  }
  .dark .glass-strong {
    @apply bg-surface-dark/80 border-white/10;
  }
  /* Full logo gradient: blue → magenta → orange */
  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(90deg, #2979FF 0%, #7B3FC8 30%, #E91E8C 60%, #FF7A00 100%);
    background-size: 200% auto;
  }
  .gradient-text-animate {
    @apply gradient-text animate-gradient-x;
  }
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold text-white shadow-glow transition-all duration-300 hover:shadow-lg hover:scale-[1.03] active:scale-95;
    background-image: linear-gradient(90deg, #2979FF 0%, #E91E8C 100%);
  }
  .btn-primary:hover {
    background-image: linear-gradient(90deg, #1456D6 0%, #C41873 100%);
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-full border border-primary-200 px-6 py-3 text-sm font-semibold text-primary-600 transition-all duration-300 hover:border-secondary-400 hover:text-secondary-500 hover:scale-[1.03] active:scale-95;
  }
  .dark .btn-secondary {
    @apply border-white/15 text-gray-200 hover:border-accent-400 hover:text-accent-400;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-primary-600 transition-all duration-300 hover:bg-primary-50;
  }
  .dark .btn-ghost {
    @apply text-gray-300 hover:bg-white/5;
  }
  .card-hover {
    @apply transition-all duration-500 hover:shadow-soft-lg hover:-translate-y-1;
  }
  .dark .card-hover {
    @apply hover:shadow-soft-dark-lg;
  }
  .section-padding {
    @apply px-5 sm:px-8 lg:px-12 xl:px-16;
  }
  .container-wide {
    @apply mx-auto max-w-7xl;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .bg-grid {
    background-image: var(--tw-bg-grid, none);
  }
  .perspective-1000 {
    perspective: 1000px;
  }
  .preserve-3d {
    transform-style: preserve-3d;
  }
}