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

@layer base {
  :root {
    --background: 20 14.3% 95.9%;
    --foreground: 20 14.3% 4.1%;
    --card: 24 9.8% 95.1%;
    --card-foreground: 20 14.3% 4.1%;
    --popover: 24 9.8% 95.1%;
    --popover-foreground: 20 14.3% 4.1%;
    --primary: 302 43% 22%;
    --primary-foreground: 210 40% 98%;
    --secondary: 302 25% 90%;
    --secondary-foreground: 302 43% 22%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 302 30% 70%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 302 43% 22%;
    --radius: 0.5rem;

    /* Enhanced Design System Variables */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-hover: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Dark Hero Variables */
    --hero-bg-start: 222 47% 11%;
    --hero-bg-end: 217 33% 17%;
    --hero-text: 210 40% 98%;
    --hero-text-muted: 215 20.2% 65.1%;

    /* Enhanced Rhyming Dictionary Tokens - Light Mode */
    --card-border: 214.3 31.8% 88%;
    --card-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.06), 0 8px 16px -8px rgba(0, 0, 0, 0.03);
    --card-background: 0 0% 100%;
    --heading-foreground: 222.2 84% 4.9%;
    --chip-border: 214.3 31.8% 85%;
    --chip-background: 210 40% 98%;
    --results-bg-tint: 210 40% 98.5%;

    /* Input State Tokens */
    --input-bg: 0 0% 100%;
    --input-border: 214.3 31.8% 88%;
    --input-hover-border: 214.3 31.8% 75%;
    --input-focus-border: 302 43% 40%;
    --input-focus-ring: 302 43% 40%;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 20 14.3% 95.9%;
    --card: 24 9.8% 10%;
    --card-foreground: 20 14.3% 95.9%;
    --popover: 24 9.8% 10%;
    --popover-foreground: 20 14.3% 95.9%;
    --primary: 302 43% 22%;
    --primary-foreground: 210 40% 98%;
    --secondary: 302 25% 20%;
    --secondary-foreground: 302 43% 98%;
    --muted: 210 40% 16.1%;
    --muted-foreground: 215.4 16.3% 66.9%;
    --accent: 302 30% 30%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 20%;
    --input: 214.3 31.8% 20%;
    --ring: 302 43% 60%;

    /* Enhanced Rhyming Dictionary Tokens - Dark Mode */
    --card-border: 214.3 31.8% 22%;
    --card-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.4), 0 8px 16px -8px rgba(0, 0, 0, 0.2);
    --card-background: 24 9.8% 12%;
    --heading-foreground: 210 40% 98%;
    --chip-border: 214.3 31.8% 28%;
    --chip-background: 24 9.8% 8%;
    --results-bg-tint: 20 14.3% 6%;

    /* Input State Tokens - Dark Mode */
    --input-bg: 24 9.8% 10%;
    --input-border: 214.3 31.8% 22%;
    --input-hover-border: 214.3 31.8% 30%;
    --input-focus-border: 302 43% 60%;
    --input-focus-ring: 302 43% 60%;
  }
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.1);
  border-radius: 20px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.1);
}

@layer utilities {
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 500px;
  }
  
  /* Hero Styles */
  .hero-dark {
    background: linear-gradient(135deg, hsl(var(--hero-bg-start)), hsl(var(--hero-bg-end)));
    color: hsl(var(--hero-text));
    position: relative;
    overflow: hidden;
  }
  
  .hero-inner {
    position: relative;
    z-index: 10;
  }

  /* App Card Specific Utilities */
  .app-card-transition {
    transition: all var(--transition-smooth);
  }
  .app-card-hover:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-hover);
  }
  .bg-app-depth {
    background: radial-gradient(circle at 50% 0%, hsl(var(--primary) / 0.05) 0%, transparent 70%);
  }

  /* Rhyming Dictionary Utilities */
  .system-card {
    background-color: hsl(var(--card-background));
    border: 1px solid hsl(var(--card-border));
    box-shadow: var(--card-shadow);
    @apply rounded-[2rem] p-6 md:p-8 transition-all duration-300;
  }
  
  .rhyme-section {
    @apply system-card;
  }
  
  .results-region {
    background-color: hsl(var(--results-bg-tint));
    border: 1px solid hsl(var(--card-border) / 0.5);
    @apply rounded-[2.5rem] p-4 md:p-8 shadow-inner transition-colors duration-300;
  }

  .filter-chip {
    @apply inline-flex items-center justify-center h-10 px-5 rounded-full text-sm font-semibold border bg-card text-muted-foreground transition-all hover:bg-muted hover:text-foreground shadow-sm whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
  }
  .filter-chip-active {
    @apply bg-primary text-primary-foreground border-primary shadow-md hover:bg-primary/90 hover:text-primary-foreground;
  }
  
  .word-chip {
    background-color: hsl(var(--chip-background));
    border: 1px solid hsl(var(--chip-border));
    @apply inline-flex items-center px-4 py-2 rounded-xl shadow-sm hover:shadow-md hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:outline-none transition-all text-foreground text-[15px] font-medium select-none cursor-pointer;
  }
  .word-chip-subtle {
    background-color: transparent;
    border: 1px dashed hsl(var(--chip-border));
    @apply inline-flex items-center px-3 py-1.5 rounded-lg hover:bg-muted hover:border-muted-foreground/30 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:outline-none transition-all text-muted-foreground text-sm font-medium select-none cursor-pointer;
  }

  /* Buttons */
  .btn { @apply inline-flex items-center justify-center h-11 px-5 text-base rounded-2xl font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2; }
  .btn-primary   { @apply bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring; }
  .btn-secondary { @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:ring-ring; }
  .btn-outline   { @apply border border-input text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring; }
  .btn-ghost     { @apply text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring; }
  .btn-link      { @apply text-primary underline underline-offset-4 hover:text-primary/80 focus-visible:ring-ring; }
  .btn-sm { @apply h-9 px-4 text-sm; }
  .btn-md { @apply h-11 px-5 text-base; }
  .btn-lg { @apply h-12 px-6 text-base; }
}