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

/* Enhanced Design System with Professional Typography and Animations */

@layer base {
  html {
    scroll-behavior: smooth;
    font-feature-settings: "cv11", "ss01";
    font-variant-ligatures: contextual;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  :root {
    /* Professional Black & Blue Theme */
    --background: 0 0% 100%;
    --foreground: 222 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222 84% 4.9%;

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

    --primary: 221 83% 53%;
    --primary-dark: 221 83% 43%;
    --primary-light: 221 83% 63%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 98%;
    --secondary-foreground: 222 84% 4.9%;

    --muted: 210 40% 98%;
    --muted-foreground: 215 16% 47%;

    --accent: 210 40% 96%;
    --accent-foreground: 222 84% 4.9%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 221 83% 53%;

    --success: 221 83% 53%;
    --success-foreground: 0 0% 100%;

    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --info: 214 92% 56%;
    --info-foreground: 0 0% 100%;

    /* Professional Service Colors */
    --blue: 221 83% 53%;
    --blue-light: 221 83% 63%;
    --purple: 270 75% 60%;
    --green: 142 76% 36%;
    --orange: 25 95% 53%;

    --chart-1: 220 85% 55%;
    --chart-2: 270 75% 60%;
    --chart-3: 142 76% 36%;
    --chart-4: 25 95% 53%;

    /* Enhanced Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(220 85% 55%) 0%, hsl(220 85% 65%) 50%, hsl(220 85% 45%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(220 20% 98%) 0%, hsl(220 25% 96%) 100%);
    --gradient-blue: linear-gradient(135deg, hsl(220 85% 55%) 0%, hsl(230 85% 60%) 100%);
    --gradient-purple: linear-gradient(135deg, hsl(270 75% 60%) 0%, hsl(280 75% 65%) 100%);
    --gradient-green: linear-gradient(135deg, hsl(142 76% 36%) 0%, hsl(152 76% 40%) 100%);
    --gradient-orange: linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(35 95% 58%) 100%);

    --radius: 0.875rem;

    /* Glass Effect */
    --glass-bg: hsla(0, 0%, 100%, 0.85);
    --glass-border: hsla(220, 15%, 80%, 0.4);

    /* Enhanced shadows with consistent HSL values */
    --shadow-subtle: 0 1px 3px 0 hsla(220, 15%, 0%, 0.06), 0 1px 2px 0 hsla(220, 15%, 0%, 0.04);
    --shadow-soft: 0 4px 6px -1px hsla(220, 15%, 0%, 0.08), 0 2px 4px -1px hsla(220, 15%, 0%, 0.04);
    --shadow-medium: 0 10px 15px -3px hsla(220, 15%, 0%, 0.1), 0 4px 6px -2px hsla(220, 15%, 0%, 0.05);
    --shadow-large: 0 20px 25px -5px hsla(220, 15%, 0%, 0.12), 0 10px 10px -5px hsla(220, 15%, 0%, 0.04);

    --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 {
    --background: 220 25% 8%;
    --foreground: 220 15% 95%;
    --card: 220 25% 10%;
    --card-foreground: 220 15% 95%;
    --popover: 220 25% 10%;
    --popover-foreground: 220 15% 95%;
    --primary: 220 85% 60%;
    --primary-dark: 220 85% 50%;
    --primary-light: 220 85% 70%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 25% 15%;
    --secondary-foreground: 220 15% 85%;
    --muted: 220 25% 15%;
    --muted-foreground: 220 15% 60%;
    --accent: 220 25% 17%;
    --accent-foreground: 220 15% 85%;
    --destructive: 0 62.8% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 25% 18%;
    --input: 220 25% 18%;
    --ring: 220 85% 60%;

    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;

    --warning: 45 93% 47%;
    --warning-foreground: 0 0% 100%;

    --info: 214 92% 56%;
    --info-foreground: 0 0% 100%;
    --glass-bg: hsla(220, 25%, 10%, 0.85);
    --glass-border: hsla(220, 25%, 30%, 0.4);
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
    box-sizing: border-box;
  }

  html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-feature-settings: "cv11", "ss01";
    font-variant-ligatures: contextual;
    line-height: 1.6;
    letter-spacing: -0.01em;
    min-height: 100vh;
    width: 100%;
    position: relative;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight;
    font-feature-settings: "cv11", "ss01";
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  h1 {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl;
    font-weight: 700;
  }

  h2 {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl;
    font-weight: 700;
  }

  h3 {
    @apply text-base sm:text-lg md:text-xl lg:text-2xl;
    font-weight: 600;
  }

  h4 {
    @apply text-sm sm:text-base md:text-lg;
    font-weight: 600;
  }

  h5 {
    @apply text-xs sm:text-sm md:text-base;
    font-weight: 600;
  }

  h6 {
    @apply text-xs sm:text-xs md:text-sm;
    font-weight: 600;
  }

  p {
    @apply leading-relaxed text-sm sm:text-base;
    color: hsl(var(--muted-foreground));
    text-wrap: pretty;
  }

  .text-balance {
    text-wrap: balance;
  }

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

  /* Prevent horizontal overflow */
  .container {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .container {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }
}

@layer utilities {
  /* Enhanced Animations with improved timing */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-float-delayed {
    animation: float 6s ease-in-out infinite 2s;
  }

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

  .animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-bounce-gentle {
    animation: bounce-gentle 3s infinite;
  }

  .animate-slide-up-delayed {
    animation: slide-up 0.6s ease-out forwards;
  }

  .animate-scale-in-delayed {
    animation: scale-in 0.4s ease-out forwards;
  }

  .animate-scroll {
    animation: scroll 40s linear infinite;
  }

  .animation-pause:hover {
    animation-play-state: paused;
  }

  /* Enhanced Micro-Interactions */
  .animate-tilt-hover {
    @apply transition-transform duration-200 ease-out;
  }

  .animate-tilt-hover:hover {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-2px);
  }

  .animate-slide-in-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    animation: slide-in-element 0.5s ease-out forwards;
  }

  .animate-slide-in-stagger > *:nth-child(1) { animation-delay: 0.1s; }
  .animate-slide-in-stagger > *:nth-child(2) { animation-delay: 0.15s; }
  .animate-slide-in-stagger > *:nth-child(3) { animation-delay: 0.2s; }
  .animate-slide-in-stagger > *:nth-child(4) { animation-delay: 0.25s; }
  .animate-slide-in-stagger > *:nth-child(5) { animation-delay: 0.3s; }
  .animate-slide-in-stagger > *:nth-child(6) { animation-delay: 0.35s; }

  .animate-magnetic {
    @apply transition-all duration-200 ease-out;
  }

  .animate-magnetic:hover {
    @apply scale-102;
    filter: brightness(1.05);
  }

  /* Glass Effect with proper HSL */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
  }

  /* Enhanced Hover Transforms with better performance */
  .hover-lift {
    @apply transition-all duration-200 ease-out will-change-transform;
  }

  .hover-lift:hover {
    @apply -translate-y-1 scale-102;
    box-shadow: var(--shadow-large);
  }

  .hover-glow {
    @apply transition-all duration-200;
  }

  .hover-glow:hover {
    box-shadow: 0 0 30px hsla(var(--primary), 0.25);
  }

  .hover-scale {
    @apply transition-transform duration-200 ease-out will-change-transform;
  }

  .hover-scale:hover {
    @apply scale-102;
  }

  .hover-shine {
    @apply relative overflow-hidden;
  }

  .hover-shine::before {
    content: '';
    @apply absolute inset-0 -translate-x-full skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-500;
  }

  .hover-shine:hover::before {
    @apply translate-x-full;
  }

  /* Typography improvements */
  .text-gradient {
    @apply bg-gradient-to-r from-primary via-purple to-primary bg-clip-text text-transparent;
  }

  .text-gradient-blue {
    @apply bg-gradient-to-r from-blue via-blue-light to-blue bg-clip-text text-transparent;
  }

  .text-hero {
    @apply text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold leading-tight tracking-tight;
    text-wrap: balance;
  }

  .text-display {
    @apply text-xl md:text-2xl lg:text-3xl font-bold leading-tight tracking-tight;
    text-wrap: balance;
  }

  .text-subtitle {
    @apply text-base md:text-lg lg:text-xl leading-relaxed;
    color: hsl(var(--muted-foreground));
  }

  /* Layout Utilities */
  .container-padding {
    @apply px-4 sm:px-6 lg:px-8 xl:px-12;
  }

  .section-padding {
    @apply py-16 md:py-20 lg:py-24 xl:py-28;
  }

  .section-spacing {
    @apply py-8 sm:py-12 md:py-16 lg:py-20 xl:py-24;
  }

  /* Mobile-first responsive utilities */
  .mobile-container {
    @apply w-full max-w-none px-4 sm:px-6 lg:px-8 mx-auto;
  }

  .mobile-text {
    @apply text-sm sm:text-base leading-relaxed;
  }

  .mobile-heading {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold;
  }

  /* Enhanced Layout Systems */
  .grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }

  .flex-center {
    @apply flex items-center justify-center;
  }

  .absolute-center {
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
  }

  .sticky-header {
    @apply sticky top-0 z-50 backdrop-blur-lg bg-background/90 border-b border-border/40;
  }

  .content-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Interactive Elements */
  .interactive-card {
    @apply transition-all duration-200 ease-out hover:-translate-y-1 cursor-pointer will-change-transform;
    box-shadow: var(--shadow-soft);
  }

  .interactive-card:hover {
    box-shadow: var(--shadow-large);
  }

  .button-primary {
    @apply bg-gradient-primary text-primary-foreground font-semibold px-8 py-4 rounded-xl transition-all duration-200 hover:scale-102 will-change-transform;
    box-shadow: var(--shadow-soft);
  }

  .button-primary:hover {
    box-shadow: var(--shadow-medium);
  }

  .button-secondary {
    @apply bg-card text-card-foreground border-2 border-border font-semibold px-8 py-4 rounded-xl transition-all duration-200 hover:bg-accent hover:border-accent-foreground/20;
    box-shadow: var(--shadow-subtle);
  }

  .button-secondary:hover {
    box-shadow: var(--shadow-soft);
  }

  /* Background Patterns with HSL */
  .bg-grid-subtle {
    background-image: 
      linear-gradient(hsla(220, 15%, 80%, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, hsla(220, 15%, 80%, 0.025) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  .bg-dots-subtle {
    background-image: radial-gradient(circle at 1px 1px, hsla(220, 15%, 80%, 0.08) 1px, transparent 0);
    background-size: 24px 24px;
  }

  .bg-grid-pattern {
    background-image: 
      linear-gradient(hsla(220, 15%, 80%, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, hsla(220, 15%, 80%, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  /* Focus styles for accessibility */
  .focus-visible:focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-background;
  }

  /* Performance optimizations */
  .will-change-transform {
    will-change: transform;
  }

  .will-change-scroll {
    will-change: scroll-position;
  }

  .gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Reduced motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .animate-float,
    .animate-float-delayed,
    .animate-gradient,
    .animate-pulse-slow,
    .animate-bounce-gentle,
    .animate-slide-up-delayed,
    .animate-scale-in-delayed,
    .animate-scroll-horizontal {
      animation: none;
    }

    .hover-lift:hover,
    .hover-scale:hover,
    .animate-magnetic:hover {
      transform: none;
    }
  }
}

/* Enhanced Keyframes with better timing */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(0.5deg); }
  66% { transform: translateY(-4px) rotate(-0.5deg); }
}

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

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

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

@keyframes scroll-rtl {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes slide-in-element {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation Classes with consistent timing */
.animate-fade-in {
  animation: fade-in 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.4s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out forwards;
}

.animate-slide-down {
  animation: slide-down 0.4s ease-out forwards;
}

.animate-slide-left {
  animation: slide-left 0.5s ease-out forwards;
}

.animate-slide-right {
  animation: slide-right 0.5s ease-out forwards;
}

/* Responsive Typography Improvements */
@media (max-width: 640px) {
  .text-hero {
    @apply text-3xl leading-tight;
  }
  
  .text-display {
    @apply text-2xl leading-tight;
  }
  
  .text-subtitle {
    @apply text-base leading-relaxed;
  }
}

/* Enhanced Component Consistency */
.section-spacing {
  @apply py-16 md:py-20 lg:py-24;
}

.section-compact {
  @apply py-10 md:py-14 lg:py-16;
}

.container-spacing {
  @apply px-4 sm:px-6 lg:px-8;
}

.card-hover {
  @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1 will-change-transform;
}

.text-balanced {
  text-wrap: balance;
}

/* Improved Focus States */
.focus-ring {
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background;
}

/* Content Flow Improvements */
.content-flow > * + * {
  margin-top: 1.5rem;
}

.content-flow-tight > * + * {
  margin-top: 1rem;
}

.content-flow-loose > * + * {
  margin-top: 2rem;
}

/* Continuous scroll animation */
.animate-scroll {
  animation: scroll 45s linear infinite;
  will-change: transform;
}

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