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

/* Global mobile overflow prevention */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* Responsive container utilities */
.container {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

:root {
  /* Light Mode - Apple Clean */
  --background: 0 0% 100%;
  --foreground: 213 64% 14%;
  --card: 0 0% 100%;
  --card-foreground: 213 64% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 64% 14%;
  
  /* AI Primary - Gold Spectrum */
  --primary: 36 95% 72%;
  --primary-foreground: 213 64% 14%;
  --primary-glow: 36 95% 80%;
  --primary-variant: 38 95% 68%;
  
  /* AI Accent - Navy Blue & Light Blue */
  --secondary: 213 64% 14%;
  --secondary-foreground: 215 77% 90%;
  --accent: 215 77% 90%;
  --accent-foreground: 213 64% 14%;
  
  /* Apple-style Neutrals */
  --muted: 215 77% 96%;
  --muted-foreground: 213 30% 40%;
  --border: 215 50% 90%;
  --input: 215 77% 95%;
  --ring: 36 95% 72%;
  
  /* Status Colors */
  --destructive: 4 92% 69%;
  --destructive-foreground: 213 64% 14%;
  --warning: 36 95% 72%;
  --warning-foreground: 213 64% 14%;
  --success: 158 64% 52%;
  --success-foreground: 213 64% 14%;
  
  /* Subtle AI Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(36 95% 72%), hsl(36 95% 80%));
  --gradient-neural: linear-gradient(120deg, hsl(36 95% 72% / 0.3), hsl(158 64% 52% / 0.3), hsl(215 77% 90% / 0.8));
  --gradient-data: linear-gradient(180deg, hsl(215 77% 90% / 0.2), transparent);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(215 77% 98%));
  --gradient-premium: linear-gradient(135deg, hsl(36 95% 72% / 0.1), hsl(215 77% 90% / 0.2));
  
  /* Minimal Pattern */
  --neural-pattern: radial-gradient(circle at 20% 30%, hsl(36 95% 72% / 0.03) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, hsl(215 77% 90% / 0.05) 0%, transparent 50%);
  
  /* Apple-style Shadows */
  --shadow-premium: 0 1px 3px hsl(213 64% 14% / 0.04), 0 12px 32px hsl(213 64% 14% / 0.08);
  --shadow-glow: 0 0 40px hsl(36 95% 72% / 0.3);
  --shadow-neural: 0 8px 30px hsl(36 95% 72% / 0.2);
  --shadow-data: 0 2px 16px hsl(213 64% 14% / 0.06);
  
  /* Smooth Transitions */
  --transition-premium: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-neural: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  
  /* Minimal Patterns */
  --grid-pattern: linear-gradient(hsl(0 0% 0% / 0.015) 1px, transparent 1px),
                  linear-gradient(90deg, hsl(0 0% 0% / 0.015) 1px, transparent 1px);
  --circuit-pattern: radial-gradient(circle at 2px 2px, hsl(215 77% 90% / 0.4) 1px, transparent 0);
}

.dark {
  /* Dark Mode - Deep Blue Theme */
  --background: 213 64% 14%;
  --foreground: 215 77% 90%;
  --card: 213 60% 18%;
  --card-foreground: 215 77% 90%;
  --popover: 213 60% 18%;
  --popover-foreground: 215 77% 90%;
  
  /* AI Primary - Gold */
  --primary: 36 95% 72%;
  --primary-foreground: 213 64% 14%;
  --primary-glow: 36 95% 80%;
  --primary-variant: 38 95% 68%;
  
  /* AI Accent - Navy & Light Blue */
  --secondary: 213 60% 18%;
  --secondary-foreground: 215 77% 90%;
  --accent: 215 77% 90%;
  --accent-foreground: 213 64% 14%;
  
  /* Apple-style Dark Neutrals */
  --muted: 213 60% 18%;
  --muted-foreground: 215 77% 70%;
  --border: 213 50% 25%;
  --input: 213 50% 25%;
  --ring: 38 95% 68%;
  
  /* Status Colors - Dark */
  --destructive: 4 92% 69%;
  --destructive-foreground: 213 64% 14%;
  --warning: 36 95% 72%;
  --warning-foreground: 213 64% 14%;
  --success: 158 64% 52%;
  --success-foreground: 213 64% 14%;
  
  /* Subtle AI Gradients - Dark */
  --gradient-primary: linear-gradient(135deg, hsl(36 95% 72%), hsl(36 95% 80%));
  --gradient-neural: linear-gradient(120deg, hsl(36 95% 72% / 0.95), hsl(158 64% 52% / 0.95), hsl(213 64% 14% / 0.95));
  --gradient-data: linear-gradient(180deg, hsl(36 95% 72% / 0.05), transparent);
  --gradient-card: linear-gradient(180deg, hsl(213 60% 18%), hsl(213 55% 20%));
  --gradient-premium: linear-gradient(135deg, hsl(36 95% 72% / 0.1), hsl(215 77% 90% / 0.1));
  
  /* Minimal Pattern - Dark */
  --neural-pattern: radial-gradient(circle at 20% 30%, hsl(36 95% 72% / 0.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, hsl(158 64% 52% / 0.06) 0%, transparent 50%);
  
  /* Apple-style Shadows - Dark */
  --shadow-premium: 0 1px 3px hsl(0 0% 0% / 0.3), 0 12px 32px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 0 50px hsl(36 95% 72% / 0.25);
  --shadow-neural: 0 8px 30px hsl(36 95% 72% / 0.2);
  --shadow-data: 0 2px 16px hsl(0 0% 0% / 0.3);
  
  /* Minimal Patterns - Dark */
  --grid-pattern: linear-gradient(hsl(0 0% 100% / 0.02) 1px, transparent 1px),
                  linear-gradient(90deg, hsl(0 0% 100% / 0.02) 1px, transparent 1px);
  --circuit-pattern: radial-gradient(circle at 2px 2px, hsl(36 95% 72% / 0.06) 1px, transparent 0);
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
    background-image: var(--neural-pattern);
    background-size: 1200px 1200px;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
  }
  
  /* Professional Typography */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  
  h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
  h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
  h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
  
  p {
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.01em;
  }
  
  /* AI-Powered Section Backgrounds */
  .section-ai-powered {
    background: linear-gradient(135deg, 
      hsl(var(--background)) 0%,
      hsl(var(--muted) / 0.5) 25%,
      hsl(var(--card)) 50%,
      hsl(var(--muted) / 0.5) 75%,
      hsl(var(--background)) 100%);
    position: relative;
  }
  
  .section-ai-powered::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--neural-pattern);
    opacity: 0.3;
  }
  
  /* Neural Network Background Pattern */
  .neural-pattern {
    background-image: var(--neural-pattern);
    background-size: 100px 100px, 150px 150px, 200px 200px;
  }
  
  /* Circuit Board Pattern */
  .circuit-pattern {
    background-image: var(--circuit-pattern);
    background-size: 20px 20px;
  }
  
  /* Tech Grid Pattern */
  .grid-pattern {
    background-image: var(--grid-pattern);
    background-size: 40px 40px;
  }
}

/* Professional Bloomberg-style Components */
@layer components {
  .hover-scale {
    @apply transition-all duration-200 ease-out hover:scale-[1.01];
  }
  
  .premium-card {
    @apply bg-card/90 border border-border/30 rounded-2xl shadow-premium backdrop-blur-xl;
  }
  
  .ai-badge {
    @apply px-3 py-1 bg-primary/10 border-0 rounded-md text-xs font-medium text-primary backdrop-blur-sm tracking-tight;
  }
  
  .neural-glow {
    @apply shadow-neural;
  }
  
  .data-stream {
    @apply relative overflow-hidden;
  }
  
  .data-stream::before {
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-primary/5 to-transparent;
    content: '';
    animation: tech-scan 4s ease-in-out infinite;
  }
  
  /* Bloomberg-style button */
  .btn-professional {
    @apply px-6 py-3 rounded-lg font-medium tracking-tight transition-all duration-200;
    @apply bg-primary text-primary-foreground hover:shadow-lg hover:scale-[1.02];
  }
}

/* Mobile Optimizations */
@layer utilities {
  .mobile-optimized {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .ios-optimized {
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    transform: translate3d(0, 0, 0);
  }
  
  .touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* AI Loading Effects */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes loading-bar {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

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

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

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

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

.bg-grid-pattern {
  background-image: 
    linear-gradient(rgba(var(--primary) / 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary) / 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
}