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

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

@layer base {
  :root {
    /* Dann Petty Inspired - Bold Minimal Premium */
    --background: 0 0% 100%; /* Pure White #FFFFFF */
    --foreground: 220 20% 10%; /* Charcoal #1A1A1A */

    /* Card & Surfaces */
    --card: 0 0% 100%; /* #FFFFFF */
    --card-foreground: 220 20% 10%;
    --card-elevated: 0 0% 98%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 10%;

    /* Brand Primary - Deep Blue */
    --primary: 220 60% 10%; /* Deep Blue #0A0F29 */
    --primary-foreground: 0 0% 100%;
    --primary-light: 220 50% 20%;
    --primary-lighter: 220 40% 30%;

    /* Secondary - Charcoal */
    --secondary: 220 20% 15%; /* Charcoal #1F2128 */
    --secondary-foreground: 0 0% 100%;
    --secondary-light: 220 15% 25%;
    --secondary-dark: 220 25% 10%;

    /* Accent - Electric Blue */
    --accent: 217 100% 50%; /* Electric Blue #0066FF */
    --accent-foreground: 0 0% 100%;
    --accent-light: 217 100% 60%;
    --accent-dark: 217 100% 40%;

    /* Success - Growth Green */
    --success: 145 70% 45%;
    --success-foreground: 0 0% 100%;
    --success-light: 145 65% 55%;

    /* Neutral Grays */
    --muted: 220 10% 96%;
    --muted-foreground: 220 10% 45%;
    --muted-dark: 220 10% 90%;

    /* Destructive */
    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Borders & Inputs */
    --border: 220 10% 90%; /* #E4E4E7 */
    --input: 220 10% 95%;
    --ring: 217 100% 50%;

    /* Minimal Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(220 60% 10%), hsl(220 50% 15%));
    --gradient-secondary: linear-gradient(135deg, hsl(220 20% 15%), hsl(220 20% 20%));
    --gradient-accent: linear-gradient(135deg, hsl(217 100% 50%), hsl(217 100% 60%));
    --gradient-hero: linear-gradient(180deg, hsl(220 60% 10%) 0%, hsl(220 50% 15%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);

    /* Clean Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px hsla(217, 100%, 50%, 0.15);
    --shadow-accent: 0 8px 20px hsla(217, 100%, 50%, 0.2);

    /* 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%;
    
    /* Chart Colors */
    --chart-1: 217 100% 50%;
    --chart-2: 145 70% 45%;
    --chart-3: 262 83% 58%;
    --chart-4: 38 92% 50%;
    --chart-5: 340 82% 52%;
  }

  .dark {
    /* Dann Petty Dark Mode - Minimal & Bold */
    --background: 220 20% 8%;
    --foreground: 0 0% 98%;

    /* Card & Surfaces */
    --card: 220 15% 12%;
    --card-foreground: 0 0% 98%;
    --card-elevated: 220 15% 15%;

    --popover: 220 15% 12%;
    --popover-foreground: 0 0% 98%;

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

    /* Secondary - Light Gray */
    --secondary: 220 10% 80%;
    --secondary-foreground: 220 20% 8%;
    --secondary-light: 220 10% 85%;
    --secondary-dark: 220 10% 70%;

    /* Accent - Electric Blue */
    --accent: 217 100% 55%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 217 100% 65%;
    --accent-dark: 217 100% 45%;

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

    /* Neutral Grays */
    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 60%;
    --muted-dark: 220 15% 12%;

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

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

    /* Dark Mode Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(220 20% 8%), hsl(220 15% 12%));
    --gradient-secondary: linear-gradient(135deg, hsl(220 15% 12%), hsl(220 15% 18%));
    --gradient-accent: linear-gradient(135deg, hsl(217 100% 55%), hsl(217 100% 65%));
    --gradient-hero: linear-gradient(180deg, hsl(220 20% 8%) 0%, hsl(220 15% 12%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(220 20% 8%) 0%, hsl(220 15% 10%) 100%);
    
    /* Chart Colors - Dark Mode */
    --chart-1: 217 100% 60%;
    --chart-2: 145 65% 55%;
    --chart-3: 262 83% 65%;
    --chart-4: 38 92% 60%;
    --chart-5: 340 82% 60%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: -0.01em;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.1;
    color: hsl(var(--foreground));
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  h1 {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 3rem;
  }

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

  h3 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }

  p, li {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 2rem;
    color: hsl(var(--muted-foreground));
  }

  section {
    padding: 10rem 0;
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
  }
}

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

  .hero-title {
    @apply text-6xl md:text-8xl font-bold leading-tight;
    color: hsl(var(--primary-foreground));
    letter-spacing: -0.04em;
  }

  /* Card Components - Clean & Minimal */
  .card-premium {
    @apply bg-card border border-border rounded-2xl;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
  }

  .card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: hsl(var(--accent) / 0.3);
  }

  .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 - One Consistent Premium Style */
  .btn-hero {
    @apply px-10 py-5 rounded-full font-medium transition-all duration-300 min-h-[56px];
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    box-shadow: var(--shadow-accent);
    font-size: 18px;
    letter-spacing: -0.01em;
  }

  .btn-hero:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
    background: hsl(var(--accent-dark));
  }

  .btn-secondary {
    @apply px-10 py-5 rounded-full font-medium border-2 transition-all duration-300 min-h-[56px];
    border-color: hsl(var(--foreground));
    color: hsl(var(--foreground));
    background: transparent;
    font-size: 18px;
    letter-spacing: -0.01em;
  }

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

  /* 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);
  }

  /* Micro-interaction Utilities */
  .card-interactive {
    @apply transition-all duration-300 ease-out;
  }

  .card-interactive:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-lg);
  }

  .card-interactive:active {
    transform: translateY(-2px) scale(0.99);
  }

  .button-scale {
    @apply transition-transform duration-200 ease-out;
  }

  .button-scale:hover {
    transform: scale(1.05);
  }

  .button-scale:active {
    transform: scale(0.98);
  }

  .link-interactive {
    @apply transition-all duration-200 ease-out;
    position: relative;
  }

  .link-interactive::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: hsl(var(--accent));
    transition: width 0.3s ease-out;
  }

  .link-interactive:hover::after {
    width: 100%;
  }

  .icon-bounce {
    @apply transition-transform duration-300 ease-out;
  }

  .icon-bounce:hover {
    animation: iconBounce 0.6s ease-in-out;
  }

  .smooth-lift {
    @apply transition-all duration-300 ease-out;
  }

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

  /* Shimmer Animation */
  .animate-shimmer {
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
  }
}

/* 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);
  }
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-6px) scale(1.1);
  }
  50% {
    transform: translateY(0) scale(1);
  }
  75% {
    transform: translateY(-3px) scale(1.05);
  }
}

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

@keyframes textShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted-dark)) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

/* 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));
  }
}