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

/* Design system for Bricoleurs de Quartier - Professional handyman directory */

@layer base {
  :root {
    /* Modern design colors - inspired by the reference site */
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    
    /* Hero gradient colors - blue to purple */
    --hero-primary: 238 70% 45%;     /* Deep blue #4A5BCC */
    --hero-secondary: 258 65% 55%;   /* Purple #7C3AED */
    --hero-tertiary: 268 75% 60%;    /* Light purple #8B5CF6 */
    
    --primary: 214 88% 27%;  /* Professional blue #0B4A99 */
    --primary-foreground: 0 0% 100%;
    --primary-hover: 214 88% 35%;
    
    --secondary: 25 95% 53%;  /* Bright orange #FF6B35 */
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 25 95% 60%;
    
    --accent: 214 100% 97%;  /* Light blue background */
    --accent-foreground: 214 88% 27%;
    
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --card-border: 214 32% 91%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    
    --input: 0 0% 100%;
    --input-border: 220 13% 91%;
    --border: 220 13% 91%;
    --ring: 238 70% 45%;
    
    /* Trust indicators */
    --success: 142 76% 36%;  /* Green for trust points */
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    /* Subscription tiers */
    --chic-primary: 45 100% 51%;  /* Or pour Chic */
    --chic-glow: 45 100% 60%;
    --chic-dark: 38 92% 40%;
    --clever-primary: 214 88% 45%;  /* Bleu pour Futé */
    --clever-glow: 214 88% 60%;
    
    /* Modern gradients */
    --gradient-hero: linear-gradient(135deg, hsl(238 70% 45%) 0%, hsl(258 65% 55%) 50%, hsl(268 75% 60%) 100%);
    --gradient-search-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(214 88% 27%) 0%, hsl(214 88% 35%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(25 95% 60%) 100%);
    --gradient-emergency: linear-gradient(135deg, hsl(25 95% 53%) 0%, hsl(15 89% 48%) 100%);
    --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    --gradient-chic: linear-gradient(135deg, hsl(45 100% 51%) 0%, hsl(45 100% 60%) 100%);
    --gradient-clever: linear-gradient(135deg, hsl(214 88% 45%) 0%, hsl(214 88% 60%) 100%);
    
    /* Modern shadows */
    --shadow-search-card: 0 25px 80px -15px hsl(238 70% 45% / 0.3);
    --shadow-button-primary: 0 12px 40px -10px hsl(214 88% 27% / 0.4);
    --shadow-button-secondary: 0 12px 40px -10px hsl(25 95% 53% / 0.4);
    --shadow-glow-primary: 0 0 30px hsl(214 88% 27% / 0.2);
    --shadow-glow-secondary: 0 0 30px hsl(25 95% 53% / 0.2);
    --shadow-chic: 0 15px 60px -10px hsl(45 100% 51% / 0.5);
    --shadow-clever: 0 10px 40px -10px hsl(214 88% 45% / 0.4);
    
    /* Animation and transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --radius: 0.5rem;

    --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: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --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;
  }

  body {
    @apply bg-background text-foreground;
  }
  
  /* Prevent logo from being identified as LCP */
  header img {
    max-height: 56px;
    width: auto;
  }
  
  @media (max-width: 640px) {
    header img {
      max-height: 40px;
    }
  }
}

@layer components {
  .card-chic {
    @apply border-[4px] border-chic shadow-[0_0_40px_hsl(var(--chic-primary)/.6)];
    background: linear-gradient(to bottom right, hsl(var(--chic-primary) / 0.08), hsl(var(--background)), hsl(var(--background)));
  }
  
  .badge-chic {
    @apply bg-gradient-to-r from-chic to-chic-glow text-black font-black border-2 border-chic-glow;
  }
  
  .ribbon-chic {
    @apply bg-gradient-to-r from-chic to-chic-glow text-black font-black shadow-xl rounded-md;
  }

  .card-fute {
    @apply border-[3px] border-clever shadow-[0_0_30px_hsl(var(--clever-primary)/.4)];
    background: linear-gradient(to bottom right, hsl(var(--clever-primary) / 0.05), hsl(var(--background)), hsl(var(--background)));
  }
  
  .badge-fute {
    @apply bg-gradient-to-r from-clever to-clever-glow text-white font-bold border-2 border-clever-glow;
  }
}