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

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 84%, 4.9%);
  --muted: hsl(210, 40%, 98%);
  --muted-foreground: hsl(215, 13.8%, 34.1%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222, 84%, 4.9%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 84%, 4.9%);
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  /* BrandingBeez brand colors extracted from logo */
  --brand-coral: hsl(351, 83%, 61%);
  --brand-coral-dark: hsl(351, 83%, 51%);
  --brand-coral-darker: hsl(351, 83%, 41%); /* For better contrast on light backgrounds */
  --brand-coral-light: hsl(351, 83%, 71%);
  --brand-coral-custom: hsl(351, 83%, 41%); /* Darker coral for better contrast */
  --brand-purple: hsl(259, 60%, 25%);
  --brand-purple-light: hsl(259, 60%, 35%);
  --brand-yellow: hsl(51, 100%, 50%);
  --brand-yellow-dark: hsl(51, 100%, 40%);
  --brand-wings: hsl(340, 50%, 94%);
  
  /* Updated theme colors using BrandingBeez brand */
  --primary: hsl(351, 83%, 61%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(259, 60%, 25%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(51, 100%, 50%);
  --accent-foreground: hsl(259, 60%, 25%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(351, 83%, 61%);
  --radius: 0.5rem;
}

/* Optimized font declaration with fallback to prevent layout shift */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Consistent Button Styles */
.btn-primary {
  @apply bg-gradient-to-r from-brand-coral to-pink-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg;
}

.btn-secondary {
  @apply bg-white text-brand-coral border-2 border-brand-coral font-semibold px-6 py-3 rounded-lg;
}

.btn-outline {
  @apply border-2 border-brand-coral text-brand-coral px-6 py-3 rounded-lg;
}

/* Consistent Text Styles */
.text-h1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight;
}

.text-h2 {
  @apply text-3xl md:text-4xl font-bold text-gray-900 leading-tight;
}

.text-h3 {
  @apply text-2xl md:text-3xl font-bold text-gray-900 leading-tight;
}

.text-body {
  @apply text-lg text-gray-700 leading-relaxed;
}

/* Core optimizations */

/* Consistent Card Styles */
.card-default {
  @apply bg-white rounded-xl shadow-lg border border-gray-100;
}

.card-gradient {
  @apply bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100;
}

/* Consistent Stats Styles */
.stats-number {
  @apply text-4xl md:text-5xl font-bold text-brand-coral mb-2;
}

.stats-label {
  @apply text-sm md:text-base text-gray-700 font-medium;
}

.stats-container {
  @apply text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100;
}

/* Consistent Icon Styles */
.icon-container {
  @apply w-12 h-12 rounded-lg flex items-center justify-center mb-4;
  background-color: hsl(var(--brand-coral) / 0.1);
}

.icon-container-large {
  @apply w-16 h-16 rounded-xl flex items-center justify-center mb-6;
  background-color: hsl(var(--brand-coral) / 0.1);
}

/* Image display fixes to prevent disappearing */
img {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Ensure partner logo containers maintain their size */
.partner-logo-container {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optimized animations with reduced motion support */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 1000px 100%;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-shimmer,
  .animate-gradient-shift,
  .animate-marquee {
    animation: none;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Essential performance optimizations - simplified */
*{box-sizing:border-box}

/* Optimized font loading - prevent layout shift */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

/* Optimize rendering performance */
.performance-layer {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.animate-gradient {
  animation: gradient-shift 6s ease infinite;
  background-size: 200% 200%;
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32%, 17%);
  --muted-foreground: hsl(215, 20%, 65%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32%, 17%);
  --input: hsl(217, 32%, 17%);
  --primary: hsl(351, 83%, 61%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(259, 60%, 25%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(51, 100%, 50%);
  --accent-foreground: hsl(259, 60%, 25%);
  --destructive: hsl(0, 62%, 30%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(351, 83%, 61%);
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  html {
    scroll-behavior: smooth;
  }
}

/* Brand color utilities */
.bg-brand-coral { background-color: var(--brand-coral); }
.bg-brand-coral-dark { background-color: var(--brand-coral-dark); }
.bg-brand-coral-darker { background-color: var(--brand-coral-darker); }
.bg-brand-coral-light { background-color: var(--brand-coral-light); }
.bg-brand-coral-custom { background-color: var(--brand-coral-custom); }
.bg-brand-purple { background-color: var(--brand-purple); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.text-brand-coral { color: var(--brand-coral); }
.text-brand-coral-dark { color: var(--brand-coral-dark); }
.text-brand-coral-darker { color: var(--brand-coral-darker); }
.text-brand-purple { color: var(--brand-purple); }
.text-brand-yellow { color: var(--brand-yellow); }
.border-brand-coral { border-color: var(--brand-coral); }
.hover\:bg-brand-coral-dark:hover { background-color: var(--brand-coral-dark); }
.hover\:text-brand-coral:hover { color: var(--brand-coral); }
.hover\:text-brand-coral-dark:hover { color: var(--brand-coral-dark); }
.hover\:text-brand-coral-darker:hover { color: var(--brand-coral-darker); }

/* Optimized animations for performance */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
  will-change: transform;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* Performance optimizations */
.optimize-animations {
  contain: layout style paint;
  will-change: transform;
}

.reduce-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* GPU acceleration for better performance */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Focus styles for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Calendly custom styles */
.calendly-inline-widget {
  min-height: 630px;
  width: 100%;
}

/* Optimized image loading */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Image optimization */
picture {
  display: contents;
}

img {
  max-width: 100%;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-pulse,
  .animate-scroll {
    animation: none !important;
  }
  
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Optimize font rendering */
body {
  font-display: swap;
  text-rendering: optimizeSpeed;
}

/* Content visibility for off-screen elements */
.off-screen {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* Loading skeletons for better perceived performance */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dark .loading-skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* Error suppression for better UX */
.error-suppression {
  display: none !important;
}