/* Font imports with font-display: swap for better performance */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-display: swap;
  src: local('Work Sans');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-display: swap;
  src: local('Spectral');
}

@import url('@fontsource/work-sans/400.css');
@import url('@fontsource/work-sans/500.css');
@import url('@fontsource/work-sans/600.css');
@import url('@fontsource/work-sans/700.css');
@import url('@fontsource/spectral/400.css');
@import url('@fontsource/spectral/500.css');
@import url('@fontsource/spectral/600.css');

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

/* Garage Door Tenino Design System
   Color Scheme: Charcoal-Orange
   Typography: Work Sans (headings) + Spectral (body)
*/

@layer base {
  :root {
    /* Charcoal-Orange Color Palette */
    --background: 0 0% 98%;
    --foreground: 200 9% 18%;

    --card: 0 0% 100%;
    --card-foreground: 200 9% 18%;

    --popover: 0 0% 100%;
    --popover-foreground: 200 9% 18%;

    /* Charcoal Primary */
    --primary: 200 9% 18%;
    --primary-foreground: 0 0% 98%;

    /* Orange Accent */
    --secondary: 14 74% 60%;
    --secondary-foreground: 0 0% 100%;

    --muted: 200 9% 94%;
    --muted-foreground: 200 9% 45%;

    /* Orange Accent for highlights */
    --accent: 14 74% 60%;
    --accent-foreground: 0 0% 100%;

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

    --border: 200 9% 88%;
    --input: 200 9% 88%;
    --ring: 14 74% 60%;

    --radius: 0.5rem;

    /* Custom colors */
    --charcoal: 200 9% 18%;
    --charcoal-light: 200 9% 28%;
    --charcoal-dark: 200 9% 12%;
    --orange: 14 74% 60%;
    --orange-light: 14 74% 70%;
    --orange-dark: 14 74% 50%;
    --cream: 40 33% 96%;
    --warm-gray: 30 5% 45%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--charcoal)) 0%, hsl(var(--charcoal-light)) 100%);
    --gradient-accent: linear-gradient(135deg, hsl(var(--orange)) 0%, hsl(var(--orange-dark)) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(var(--charcoal)) 0%, hsl(200 9% 22%) 50%, hsl(var(--charcoal-light)) 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(var(--charcoal) / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(var(--charcoal) / 0.1), 0 2px 4px -2px hsl(var(--charcoal) / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(var(--charcoal) / 0.1), 0 4px 6px -4px hsl(var(--charcoal) / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(var(--charcoal) / 0.1), 0 8px 10px -6px hsl(var(--charcoal) / 0.1);
    --shadow-orange: 0 10px 30px -10px hsl(var(--orange) / 0.4);

    /* Sidebar (keeping defaults) */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 200 9% 26%;
    --sidebar-primary: 200 9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 200 9% 95%;
    --sidebar-accent-foreground: 200 9% 10%;
    --sidebar-border: 200 9% 91%;
    --sidebar-ring: 14 74% 60%;
  }

  .dark {
    --background: 200 9% 8%;
    --foreground: 0 0% 95%;

    --card: 200 9% 12%;
    --card-foreground: 0 0% 95%;

    --popover: 200 9% 12%;
    --popover-foreground: 0 0% 95%;

    --primary: 0 0% 98%;
    --primary-foreground: 200 9% 12%;

    --secondary: 14 74% 60%;
    --secondary-foreground: 0 0% 100%;

    --muted: 200 9% 18%;
    --muted-foreground: 200 9% 65%;

    --accent: 14 74% 60%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 95%;

    --border: 200 9% 20%;
    --input: 200 9% 20%;
    --ring: 14 74% 60%;

    --sidebar-background: 200 9% 10%;
    --sidebar-foreground: 200 9% 95%;
    --sidebar-primary: 14 74% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 200 9% 16%;
    --sidebar-accent-foreground: 200 9% 95%;
    --sidebar-border: 200 9% 16%;
    --sidebar-ring: 14 74% 60%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family: 'Spectral', Georgia, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', system-ui, sans-serif;
    @apply font-semibold tracking-tight;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  /* Typography utilities */
  .font-heading {
    font-family: 'Work Sans', system-ui, sans-serif;
  }

  .font-body {
    font-family: 'Spectral', Georgia, serif;
  }

  /* Custom button styles */
  .btn-primary {
    @apply bg-secondary text-secondary-foreground font-heading font-semibold 
           px-6 py-3 rounded-lg transition-all duration-300
           hover:shadow-lg hover:scale-105 active:scale-95;
    box-shadow: var(--shadow-orange);
  }

  .btn-secondary {
    @apply bg-primary text-primary-foreground font-heading font-medium
           px-6 py-3 rounded-lg transition-all duration-300
           hover:bg-primary/90 active:scale-95;
  }

  .btn-outline {
    @apply border-2 border-secondary text-secondary font-heading font-medium
           px-6 py-3 rounded-lg transition-all duration-300
           hover:bg-secondary hover:text-secondary-foreground active:scale-95;
  }

  /* Card variants */
  .card-elevated {
    @apply bg-card rounded-xl p-6 transition-all duration-300;
    box-shadow: var(--shadow-md);
  }

  .card-elevated:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
  }

  /* Section spacing */
  .section-padding {
    @apply py-16 md:py-24 px-4 md:px-8;
  }

  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Text gradients */
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-accent);
  }

  /* Urgency banner */
  .urgency-banner {
    @apply bg-secondary text-secondary-foreground font-heading font-medium
           text-center py-2 px-4 text-sm md:text-base;
  }

  /* Trust badge */
  .trust-badge {
    @apply inline-flex items-center gap-2 bg-muted px-4 py-2 rounded-full
           text-sm font-heading font-medium text-muted-foreground;
  }

  /* Sticky CTA bar */
  .sticky-cta {
    @apply fixed bottom-0 left-0 right-0 bg-primary text-primary-foreground
           py-3 px-4 shadow-lg z-50 flex items-center justify-center gap-4;
  }

  /* Hero split */
  .hero-split {
    @apply grid md:grid-cols-2 min-h-[80vh] items-center;
  }

  /* Timeline styles */
  .timeline-item {
    @apply relative pl-8 pb-8 border-l-2 border-secondary/30 last:border-l-0;
  }

  .timeline-item::before {
    content: '';
    @apply absolute left-[-9px] top-0 w-4 h-4 rounded-full bg-secondary;
  }

  /* Carousel dots */
  .carousel-dot {
    @apply w-2 h-2 rounded-full bg-muted-foreground/30 transition-all duration-300;
  }

  .carousel-dot.active {
    @apply w-6 bg-secondary;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

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

  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
}