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

/* Premium SEO Agency Design System - Digital Guru */

@layer base {
  :root {
    /* Premium High-Tech Color Palette */
    --background: 0 0% 98%; /* #FAFAFA */
    --foreground: 222 84% 5%; /* #0F172A */

    /* Card & Surfaces */
    --card: 0 0% 100%; /* #FFFFFF */
    --card-foreground: 222 84% 5%;
    --card-elevated: 0 0% 100%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 84% 5%;

    /* Brand Primary - Deep Purple */
    --primary: 257 72% 35%; /* #4C1D95 */
    --primary-foreground: 0 0% 100%;
    --primary-light: 257 72% 45%;
    --primary-lighter: 257 72% 55%;

    /* Secondary - Indigo */
    --secondary: 245 67% 51%; /* #4338CA */
    --secondary-foreground: 0 0% 100%;
    --secondary-light: 245 67% 61%;
    --secondary-dark: 245 67% 41%;

    /* Accent - Neon Blue CTA */
    --accent: 217 91% 60%; /* #3B82F6 */
    --accent-foreground: 0 0% 100%;
    --accent-light: 217 91% 70%;
    --accent-dark: 217 73% 40%; /* #1E40AF hover */

    /* Success - Growth Green */
    --success: 145 85% 35%;
    --success-foreground: 0 0% 100%;
    --success-light: 145 60% 50%;

    /* Neutral Grays */
    --muted: 220 15% 96%;
    --muted-foreground: 220 10% 50%;
    --muted-dark: 220 15% 88%;

    /* Destructive */
    --destructive: 0 85% 60%;
    --destructive-foreground: 0 0% 100%;

    /* Borders & Inputs */
    --border: 220 13% 91%; /* #E5E7EB */
    --input: 220 13% 94%;
    --ring: 217 91% 60%;

    /* Premium Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(257 72% 35%), hsl(245 67% 51%));
    --gradient-secondary: linear-gradient(135deg, hsl(245 67% 51%), hsl(245 67% 41%));
    --gradient-accent: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 73% 40%));
    --gradient-hero: linear-gradient(135deg, hsl(257 72% 35%) 0%, hsl(245 67% 51%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 100%) 100%);

    /* Premium Shadows */
    --shadow-sm: 0 1px 3px hsl(257 72% 35% / 0.1);
    --shadow-md: 0 4px 12px hsl(257 72% 35% / 0.15);
    --shadow-lg: 0 10px 25px hsl(257 72% 35% / 0.2);
    --shadow-xl: 0 20px 40px hsl(257 72% 35% / 0.25);
    --shadow-glow: 0 0 30px hsl(217 91% 60% / 0.4);
    --shadow-accent: 0 8px 25px hsl(217 91% 60% / 0.3);

    /* Animation */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --radius: 0.75rem;

    --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 {
    /* Core Brand Colors - Dark Mode */
    --background: 220 60% 5%;
    --foreground: 0 0% 95%;

    /* Card & Surfaces */
    --card: 220 40% 8%;
    --card-foreground: 0 0% 95%;
    --card-elevated: 220 35% 12%;

    --popover: 220 40% 8%;
    --popover-foreground: 0 0% 95%;

    /* Brand Primary - Light for dark mode */
    --primary: 0 0% 95%;
    --primary-foreground: 220 60% 8%;
    --primary-light: 220 20% 85%;
    --primary-lighter: 220 15% 75%;

    /* Secondary - Electric Blue (adjusted) */
    --secondary: 210 100% 65%;
    --secondary-foreground: 220 60% 8%;
    --secondary-light: 210 100% 75%;
    --secondary-dark: 210 100% 45%;

    /* Accent - Premium Orange (adjusted) */
    --accent: 25 95% 65%;
    --accent-foreground: 220 60% 8%;
    --accent-light: 25 95% 75%;
    --accent-dark: 25 95% 50%;

    /* Success - Growth Green */
    --success: 145 60% 50%;
    --success-foreground: 220 60% 8%;
    --success-light: 145 55% 60%;

    /* Neutral Grays */
    --muted: 220 15% 15%;
    --muted-foreground: 220 10% 65%;
    --muted-dark: 220 15% 10%;

    /* Destructive */
    --destructive: 0 85% 65%;
    --destructive-foreground: 220 60% 8%;

    /* Borders & Inputs */
    --border: 220 15% 20%;
    --input: 220 15% 18%;
    --ring: 210 100% 65%;

    /* Updated Gradients for Dark Mode */
    --gradient-primary: linear-gradient(135deg, hsl(220 60% 5%), hsl(220 40% 12%));
    --gradient-secondary: linear-gradient(135deg, hsl(210 100% 65%), hsl(210 100% 45%));
    --gradient-accent: linear-gradient(135deg, hsl(25 95% 65%), hsl(25 95% 50%));
    --gradient-hero: linear-gradient(135deg, hsl(220 60% 5%) 0%, hsl(220 40% 12%) 50%, hsl(210 100% 45%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(220 60% 5%) 0%, hsl(220 40% 8%) 100%);
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.7;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    color: hsl(var(--primary));
  }

  h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 2rem;
  }

  h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  p, li {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 1.5rem;
  }

  section {
    padding: 6rem 0;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }
}

@layer components {
  /* Hero Components */
  .hero-section {
    @apply min-h-screen relative overflow-hidden;
    background: var(--gradient-hero);
  }

  .hero-title {
    @apply text-5xl md:text-7xl font-bold leading-tight;
    background: linear-gradient(135deg, hsl(var(--primary-foreground)), hsl(var(--secondary-light)));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Card Components */
  .card-premium {
    @apply bg-card border-border rounded-xl;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-smooth);
  }

  .card-premium:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
  }

  .card-glow {
    @apply card-premium;
    box-shadow: var(--shadow-glow);
  }

  /* Touch Target Accessibility */
  .touch-target {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }

  /* Button Variants */
  .btn-hero {
    @apply px-8 py-4 rounded-xl font-semibold transition-all duration-300 min-h-[48px] min-w-[48px];
    background: var(--gradient-accent);
    color: hsl(var(--accent-foreground));
    box-shadow: var(--shadow-accent);
  }

  .btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl), var(--shadow-accent);
  }

  .btn-secondary {
    @apply px-8 py-4 rounded-xl font-semibold border-2 transition-all duration-300 min-h-[48px] min-w-[48px];
    border-color: hsl(var(--secondary));
    color: hsl(var(--secondary));
    background: transparent;
  }

  .btn-secondary:hover {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
  }

  /* Screen Reader Only Content */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* Form Elements - Perfect Symmetry System */
.form-label {
  @apply block text-sm font-medium text-foreground mb-2;
}

.form-input {
  @apply w-full h-12 px-4 py-0 border border-border rounded-lg bg-background text-foreground placeholder-muted-foreground focus:ring-2 focus:ring-secondary focus:border-transparent transition-all duration-200 shadow-sm hover:shadow-md flex items-center;
  font-size: 16px; 
  line-height: 1.5;
  min-height: 48px;
}

.form-input:focus {
  box-shadow: var(--shadow-accent);
}

/* CTA Container - Consistent Alignment */
.cta-container {
  @apply flex flex-col md:flex-row gap-3 md:gap-4 items-stretch md:items-end justify-center;
}

.cta-container.mobile-stack {
  @apply flex-col gap-3;
}

/* Button-Input Perfect Matching */
.btn-matched {
  @apply h-12 px-4 rounded-lg font-medium transition-all duration-200 shadow-sm hover:shadow-md hover:scale-[1.03] active:scale-[0.98] flex items-center justify-center;
  font-size: 16px;
  line-height: 1.5;
  min-height: 48px;
}

/* Consolidated Form System - Reduced Duplication */
.form-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.form-stacked .form-input-stacked {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-stacked .form-input-stacked:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.form-stacked .form-input-stacked:focus {
  outline: none;
  border-color: hsl(var(--secondary));
  box-shadow: 0 0 0 2px hsl(var(--secondary) / 0.2), var(--shadow-accent);
}

.form-stacked .form-input-stacked::placeholder {
  color: hsl(var(--muted-foreground));
}

.form-stacked .form-button-stacked {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  border: 1px solid hsl(var(--accent));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.form-stacked .form-button-stacked:hover {
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px) scale(1.02);
}

.form-stacked .form-button-stacked:active {
  transform: translateY(0) scale(0.98);
}

.form-stacked .form-button-stacked:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Dark theme form inputs */
.form-stacked .form-input-dark {
  background: hsl(var(--primary-foreground) / 0.1);
  border: 1px solid hsl(var(--primary-foreground) / 0.2);
  color: hsl(var(--primary-foreground));
}

.form-stacked .form-input-dark::placeholder {
  color: hsl(var(--primary-foreground) / 0.6);
}

.form-stacked .form-input-dark:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 2px hsl(var(--accent) / 0.2), var(--shadow-accent);
}

/* Legacy class aliases for backward compatibility removed - use .form-stacked instead */

/* Mobile Responsive - Consolidated */
@media (max-width: 767px) {
  .form-stacked .form-input-stacked,
  .form-stacked .form-button-stacked {
    height: 44px;
    padding: 0 12px;
  }
}

/* Mobile Responsive Form System */
@media (max-width: 767px) {
  .form-input {
    @apply h-11 px-3;
    font-size: 16px;
    min-height: 44px;
  }
  
  .btn-matched {
    @apply h-11 px-3;
    font-size: 16px;
    min-height: 44px;
  }
  
  .cta-container {
    @apply flex-col gap-3;
  }
  
  .email-cta-container {
    @apply flex-col gap-3;
  }
}

  /* High Contrast Mode Support */
  @media (prefers-contrast: high) {
    .btn-hero {
      border: 2px solid hsl(var(--accent));
    }
    
    .btn-secondary {
      border: 2px solid hsl(var(--secondary));
    }
  }

  /* Focus Styles for Accessibility */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
  .text-gradient-primary {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text-gradient-secondary {
    background: var(--gradient-secondary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text-gradient-accent {
    background: var(--gradient-accent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Metrics & Stats */
  .metric-card {
    @apply text-center p-6 rounded-xl;
    background: hsl(var(--card-elevated));
    border: 1px solid hsl(var(--border));
    transition: var(--transition-smooth);
  }

  .metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .metric-number {
    @apply text-4xl font-bold mb-2;
    color: hsl(var(--secondary));
  }

  /* Animations */
  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
  }

  .animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out;
  }

  .animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.6s ease-out;
  }

  .animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
  }
}

@layer utilities {
  /* Gradient Backgrounds */
  .bg-gradient-hero {
    background: var(--gradient-hero);
  }

  .bg-gradient-primary {
    background: var(--gradient-primary);
  }

  .bg-gradient-secondary {
    background: var(--gradient-secondary);
  }

  .bg-gradient-accent {
    background: var(--gradient-accent);
  }

  .bg-gradient-subtle {
    background: var(--gradient-subtle);
  }

  /* Shadow Utilities */
  .shadow-premium {
    box-shadow: var(--shadow-lg);
  }

  .shadow-glow {
    box-shadow: var(--shadow-glow);
  }

  .shadow-accent {
    box-shadow: var(--shadow-accent);
  }
}

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: var(--shadow-glow);
  }
  50% {
    box-shadow: var(--shadow-xl), var(--shadow-glow);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

/* Z-index hierarchy for proper stacking */
.z-chat { z-index: 35; }
.z-sticky-cta { z-index: 30; }
.z-tooltip { z-index: 40; }
.z-toast { z-index: 100; }
.z-modal { z-index: 50; }

/* Chat launcher positioning with safe area support */
.chat-launcher {
  position: fixed;
  right: max(28px, env(safe-area-inset-right, 16px));
  bottom: max(28px, env(safe-area-inset-bottom, 16px));
  z-index: 35;
}

@media (max-width: 767px) {
  .chat-launcher {
    right: max(16px, env(safe-area-inset-right, 16px));
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }
}