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

/* AutoKeyExpress Design System - Professional Automotive Key Service Theme */

@layer base {
  :root {
    /* Brand Colors - Professional automotive theme */
    --background: 0 0% 100%;
    --foreground: 156 15% 15%;

    --card: 0 0% 100%;
    --card-foreground: 156 15% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 156 15% 15%;

    /* Primary: Deep Forest Green - Trust & Security */
    --primary: 156 45% 18%;
    --primary-foreground: 0 0% 98%;
    --primary-light: 156 35% 25%;
    --primary-dark: 156 55% 12%;

    /* Secondary: Clean Light Gray */
    --secondary: 156 10% 96%;
    --secondary-foreground: 156 15% 15%;

    /* Muted tones */
    --muted: 156 8% 95%;
    --muted-foreground: 156 12% 45%;

    /* Accent: Warm Orange - Call to Action */
    --accent: 32 95% 58%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 32 95% 65%;
    --accent-dark: 32 95% 50%;

    /* Yellow variant for highlights */
    --warning: 48 100% 67%;
    --warning-foreground: 156 15% 15%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 156 15% 89%;
    --input: 156 10% 96%;
    --ring: 156 45% 18%;

    --radius: 0.5rem;

    /* Custom spacing and layout */
    --header-height: 4rem;
    --hero-min-height: 80vh;
    
    /* Automotive service specific colors */
    --success: 156 72% 37%;
    --success-foreground: 0 0% 98%;
    
    /* Professional shadows */
    --shadow-sm: 0 1px 2px 0 hsl(156 15% 15% / 0.06);
    --shadow: 0 1px 3px 0 hsl(156 15% 15% / 0.1), 0 1px 2px -1px hsl(156 15% 15% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(156 15% 15% / 0.1), 0 4px 6px -4px hsl(156 15% 15% / 0.1);
    
    /* Typography */
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
  }

  .dark {
    --background: 156 25% 8%;
    --foreground: 156 5% 95%;

    --card: 156 20% 10%;
    --card-foreground: 156 5% 95%;

    --popover: 156 20% 10%;
    --popover-foreground: 156 5% 95%;

    --primary: 156 45% 25%;
    --primary-foreground: 0 0% 98%;

    --secondary: 156 15% 15%;
    --secondary-foreground: 156 5% 85%;

    --muted: 156 15% 12%;
    --muted-foreground: 156 8% 60%;

    --accent: 32 95% 58%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 98%;

    --border: 156 15% 20%;
    --input: 156 15% 15%;
    --ring: 156 45% 25%;
  }
}

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

  body {
    @apply bg-background text-foreground antialiased;
    font-family: var(--font-body);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
  }
  
  .hero-gradient {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
  }
}

@layer components {
  .container-custom {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .btn-primary {
    @apply bg-primary text-primary-foreground hover:bg-primary/90 px-6 py-3 rounded-lg font-medium transition-colors;
  }
  
  .btn-accent {
    @apply bg-accent text-accent-foreground hover:bg-accent/90 px-6 py-3 rounded-lg font-medium transition-colors;
  }
  
  .section-padding {
    @apply py-16 lg:py-24;
  }
}