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

/* 
 * Pre-hydration dark mode support
 * Uses color-scheme property set by inline script before React loads
 * This prevents FOUC while avoiding hydration mismatches
 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
  }
}

/* Local fonts for faster loading - no external requests */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2') format('woff2');
}

@layer base {
  :root {
    --background: 210 20% 98%;
    --foreground: 220 25% 10%;

    --card: 0 0% 100%;
    --card-foreground: 220 25% 10%;

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

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

    --secondary: 210 20% 96%;
    --secondary-foreground: 220 25% 25%;

    --muted: 210 15% 94%;
    --muted-foreground: 220 10% 45%;

    --accent: 175 70% 45%;
    --accent-foreground: 0 0% 100%;

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

    --border: 214 20% 90%;
    --input: 214 20% 90%;
    --ring: 221 83% 53%;

    --radius: 0.75rem;

    /* Custom tokens */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    --gradient-primary: linear-gradient(135deg, hsl(221, 83%, 53%) 0%, hsl(200, 85%, 55%) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(175, 70%, 45%) 0%, hsl(195, 75%, 50%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(210, 20%, 98%) 0%, hsl(210, 30%, 95%) 100%);

    --shadow-soft: 0 2px 8px -2px hsl(220 25% 10% / 0.08);
    --shadow-card: 0 4px 16px -4px hsl(220 25% 10% / 0.1);
    --shadow-elevated: 0 8px 32px -8px hsl(220 25% 10% / 0.15);
    --shadow-glow: 0 0 24px hsl(221 83% 53% / 0.2);

    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Ad zone styling */
    --ad-background: 210 15% 96%;
    --ad-border: 214 20% 88%;
    --ad-text: 220 10% 55%;

    --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: 210 20% 98%;

    --card: 220 20% 12%;
    --card-foreground: 210 20% 98%;

    --popover: 220 20% 12%;
    --popover-foreground: 210 20% 98%;

    --primary: 217 91% 60%;
    --primary-foreground: 220 25% 8%;

    --secondary: 220 20% 16%;
    --secondary-foreground: 210 15% 80%;

    --muted: 220 15% 18%;
    --muted-foreground: 215 15% 55%;

    --accent: 175 65% 50%;
    --accent-foreground: 220 25% 8%;

    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 15% 20%;
    --input: 220 15% 20%;
    --ring: 217 91% 60%;

    --success: 142 70% 45%;
    --warning: 38 85% 55%;

    --gradient-primary: linear-gradient(135deg, hsl(217, 91%, 60%) 0%, hsl(200, 80%, 55%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(220, 25%, 8%) 0%, hsl(220, 20%, 12%) 100%);

    --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-card: 0 4px 16px -4px hsl(0 0% 0% / 0.4);
    --shadow-elevated: 0 8px 32px -8px hsl(0 0% 0% / 0.5);
    --shadow-glow: 0 0 24px hsl(217 91% 60% / 0.3);

    --ad-background: 220 15% 14%;
    --ad-border: 220 15% 22%;
    --ad-text: 215 15% 50%;

    --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%;
  }

  /* 
   * Pre-hydration dark mode using color-scheme
   * Applied before React adds .dark class to prevent flash
   */
  :root[style*="color-scheme: dark"]:not(.light):not(.dark) {
    --background: 220 25% 8%;
    --foreground: 210 20% 98%;
    --card: 220 20% 12%;
    --card-foreground: 210 20% 98%;
    --popover: 220 20% 12%;
    --popover-foreground: 210 20% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 220 25% 8%;
    --secondary: 220 20% 16%;
    --secondary-foreground: 210 15% 80%;
    --muted: 220 15% 18%;
    --muted-foreground: 215 15% 55%;
    --accent: 175 65% 50%;
    --accent-foreground: 220 25% 8%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 15% 20%;
    --input: 220 15% 20%;
    --ring: 217 91% 60%;
    --success: 142 70% 45%;
    --warning: 38 85% 55%;
    --gradient-primary: linear-gradient(135deg, hsl(217, 91%, 60%) 0%, hsl(200, 80%, 55%) 100%);
    --gradient-hero: linear-gradient(180deg, hsl(220, 25%, 8%) 0%, hsl(220, 20%, 12%) 100%);
    --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.3);
    --shadow-card: 0 4px 16px -4px hsl(0 0% 0% / 0.4);
    --shadow-elevated: 0 8px 32px -8px hsl(0 0% 0% / 0.5);
    --shadow-glow: 0 0 24px hsl(217 91% 60% / 0.3);
    --ad-background: 220 15% 14%;
    --ad-border: 220 15% 22%;
    --ad-text: 215 15% 50%;
  }
}

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

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }

  code, pre {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer components {
  .drop-zone {
    @apply relative border-2 border-dashed border-primary/30 rounded-2xl p-12 
           bg-primary/5 hover:bg-primary/10 hover:border-primary/50
           transition-all duration-300 cursor-pointer;
  }

  .drop-zone.dragging {
    @apply border-primary bg-primary/15 scale-[1.02];
    box-shadow: var(--shadow-glow);
  }

  .ad-zone {
    @apply bg-[hsl(var(--ad-background))] border border-[hsl(var(--ad-border))] 
           rounded-lg flex items-center justify-center text-[hsl(var(--ad-text))] text-xs;
  }

  .sticky-sidebar {
    @apply sticky top-6;
  }

  .glass-card {
    @apply bg-card/80 backdrop-blur-sm border border-border/50 rounded-xl;
    box-shadow: var(--shadow-card);
  }

  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-primary);
  }

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

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
    }
    50% {
      box-shadow: 0 0 40px hsl(var(--primary) / 0.4);
    }
  }

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

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}