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

/* Critical CSS for FCP */
@layer base {
  @font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/dmsans/v14/pFzzXOR1j_ZqJ0LzNqZjXbVpbg.woff2') format('woff2');
  }

  :root {
    --background: 240 10% 4%;
    --foreground: 0 0% 98%;
    --card: 240 10% 7%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 7%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 328 83% 52%; 
    --primary-foreground: 0 0% 100%;
    
    --secondary: 240 5% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 5% 12%;
    --muted-foreground: 240 5% 65%;
    
    --accent: 328 83% 52%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5% 18%;
    --input: 240 5% 18%;
    --ring: 328 83% 52%;
    --radius: 1rem;
    
    --surface-dark: 0 0% 4%;
    --surface-elevated: 0 0% 7%;
    --glow-purple: 328 83% 52%;
    
    --form-bg: 240 10% 6%;
    --form-section-bg: 240 8% 9%;
    --form-border: 240 5% 18%;
    --form-input-bg: 240 7% 12%;
    --form-accent: 328 83% 52%;

    --search-accent: 328 83% 52%;
    
    --chat-bg: 240 10% 5%;
    --chat-border: 240 5% 20%;
    --chat-user-msg: 328 83% 52%;
    --chat-bot-msg: 240 5% 15%;
  }

  .dark {
    --background: 240 10% 4%;
    --foreground: 0 0% 98%;
    --card: 240 10% 7%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 7%;
    --popover-foreground: 0 0% 98%;
    --primary: 328 83% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 5% 15%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 5% 12%;
    --muted-foreground: 240 5% 65%;
    --accent: 328 83% 52%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5% 18%;
    --input: 240 5% 18%;
    --ring: 328 83% 52%;
    
    --surface-dark: 0 0% 4%;
    --surface-elevated: 0 0% 7%;
    --glow-purple: 328 83% 52%;

    --form-bg: 240 10% 6%;
    --form-section-bg: 240 8% 9%;
    --form-border: 240 5% 18%;
    --form-input-bg: 240 7% 12%;
    --form-accent: 328 83% 52%;
    
    --search-accent: 328 83% 52%;
    
    --chat-bg: 240 10% 5%;
    --chat-border: 240 5% 20%;
    --chat-user-msg: 328 83% 52%;
    --chat-bot-msg: 240 5% 15%;
  }

  * {
    box-sizing: border-box;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    @apply bg-[#0a0a0a] text-foreground;
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
  }
  
  #root {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  html {
    scroll-behavior: smooth;
  }
  
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Prevent CLS shifts */
  footer {
    min-height: 280px;
  }

  .categories-section {
    min-height: 400px;
  }
}

/* Component-specific */
@layer components {
  .form-container {
    @apply bg-[#0f0f0f] border border-white/10 rounded-2xl shadow-2xl p-6 md:p-8 text-white relative overflow-hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 40px rgba(233, 30, 140, 0.05);
  }

  .dark-input {
    @apply bg-[#1a1a1a] border-white/20 text-white placeholder:text-white/40 focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary transition-all !important;
  }

  .search-frame {
    @apply w-full bg-background/95 backdrop-blur-xl rounded-2xl p-3 md:p-4 transition-all duration-300 z-20 relative;
    border: 3px solid hsl(var(--search-accent));
    box-shadow: 0 0 25px hsl(var(--search-accent) / 0.25), inset 0 0 15px hsl(var(--search-accent) / 0.15);
  }
  
  .search-frame:focus-within {
    border-color: hsl(var(--search-accent) / 0.9);
    box-shadow: 0 0 35px hsl(var(--search-accent) / 0.35), inset 0 0 20px hsl(var(--search-accent) / 0.2);
  }

  .finance-input {
    @apply w-full bg-[#111111] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder:text-muted-foreground/60 transition-all duration-300 min-h-[44px];
  }
  
  .finance-input:focus, .finance-input:focus-within {
    @apply border-primary/60 outline-none;
    box-shadow: 0 0 0 1px hsl(var(--glow-purple) / 0.2), 0 0 20px hsl(var(--glow-purple) / 0.15) inset;
  }

  .media-dropzone {
    @apply relative flex flex-col items-center justify-center w-full border-2 border-dashed border-[hsl(var(--form-border))] rounded-xl bg-[hsl(var(--form-input-bg))] transition-all duration-300 cursor-pointer overflow-hidden p-8 md:p-12 text-center;
  }

  .glow-border {
    @apply bg-background/95 backdrop-blur-xl;
    border: 1px solid hsl(var(--glow-purple) / 0.3);
    box-shadow: 
      0 0 10px hsl(var(--glow-purple) / 0.08),
      inset 0 0 4px hsl(var(--glow-purple) / 0.04);
    transition: all 0.3s ease-in-out;
  }
  
  .glow-border:hover, .glow-border:focus-within {
    border-color: hsl(var(--glow-purple) / 0.5);
    box-shadow: 
      0 0 15px hsl(var(--glow-purple) / 0.15),
      inset 0 0 6px hsl(var(--glow-purple) / 0.08);
  }
}

/* Utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .text-glow-pink {
    text-shadow: 0 0 15px hsl(var(--primary) / 0.5), 0 0 30px hsl(var(--primary) / 0.25);
  }
  
  .shadow-glow-pink {
    box-shadow: 0 0 25px hsl(var(--primary) / 0.35), 0 0 50px hsl(var(--primary) / 0.15);
  }
}