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

@import "@fontsource/libre-baskerville/400.css";
@import "@fontsource/libre-baskerville/700.css";
@import "@fontsource/source-sans-pro/400.css";
@import "@fontsource/source-sans-pro/600.css";
@import "@fontsource/source-sans-pro/700.css";

/* Font display swap for performance */
@font-face {
  font-family: 'Libre Baskerville';
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  font-display: swap;
}

/* Garage Door La Mesa - Burgundy & Ivory Design System */

@layer base {
  :root {
    /* Burgundy-Ivory Color Palette */
    --background: 40 33% 96%;
    --foreground: 350 30% 15%;

    --card: 40 40% 98%;
    --card-foreground: 350 30% 15%;

    --popover: 40 40% 98%;
    --popover-foreground: 350 30% 15%;

    /* Primary - Deep Burgundy */
    --primary: 350 56% 30%;
    --primary-foreground: 40 33% 96%;

    /* Secondary - Warm Ivory */
    --secondary: 40 40% 92%;
    --secondary-foreground: 350 30% 20%;

    /* Muted - Soft Ivory */
    --muted: 40 25% 90%;
    --muted-foreground: 350 15% 40%;

    /* Accent - Rich Gold */
    --accent: 38 70% 50%;
    --accent-foreground: 350 30% 15%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 40 33% 96%;

    --border: 40 20% 85%;
    --input: 40 20% 85%;
    --ring: 350 56% 30%;

    --radius: 0.5rem;

    /* Custom tokens */
    --burgundy-dark: 350 60% 22%;
    --burgundy-light: 350 45% 45%;
    --ivory-warm: 40 45% 94%;
    --ivory-pure: 40 50% 98%;
    --gold-accent: 38 70% 50%;
    --gold-light: 38 65% 65%;
    --charcoal: 350 20% 18%;
    
    /* Gradients */
    --gradient-burgundy: linear-gradient(135deg, hsl(350 56% 30%), hsl(350 60% 22%));
    --gradient-gold: linear-gradient(135deg, hsl(38 70% 50%), hsl(38 65% 60%));
    --gradient-overlay: linear-gradient(180deg, hsla(350 30% 10% / 0.7) 0%, hsla(350 30% 10% / 0.4) 100%);
    
    /* Shadows */
    --shadow-soft: 0 4px 20px -4px hsla(350 30% 15% / 0.1);
    --shadow-elevated: 0 12px 40px -8px hsla(350 30% 15% / 0.15);
    --shadow-burgundy: 0 8px 30px -6px hsla(350 56% 30% / 0.3);

    /* Sidebar tokens */
    --sidebar-background: 40 40% 98%;
    --sidebar-foreground: 350 30% 15%;
    --sidebar-primary: 350 56% 30%;
    --sidebar-primary-foreground: 40 33% 96%;
    --sidebar-accent: 40 40% 92%;
    --sidebar-accent-foreground: 350 30% 20%;
    --sidebar-border: 40 20% 85%;
    --sidebar-ring: 350 56% 30%;
  }

  .dark {
    --background: 350 30% 8%;
    --foreground: 40 33% 96%;

    --card: 350 25% 12%;
    --card-foreground: 40 33% 96%;

    --popover: 350 25% 12%;
    --popover-foreground: 40 33% 96%;

    --primary: 350 50% 45%;
    --primary-foreground: 40 33% 96%;

    --secondary: 350 20% 18%;
    --secondary-foreground: 40 33% 96%;

    --muted: 350 20% 18%;
    --muted-foreground: 40 20% 65%;

    --accent: 38 60% 55%;
    --accent-foreground: 350 30% 10%;

    --destructive: 0 62% 30%;
    --destructive-foreground: 40 33% 96%;

    --border: 350 20% 20%;
    --input: 350 20% 20%;
    --ring: 350 50% 45%;

    --sidebar-background: 350 30% 8%;
    --sidebar-foreground: 40 33% 96%;
    --sidebar-primary: 350 50% 45%;
    --sidebar-primary-foreground: 40 33% 96%;
    --sidebar-accent: 350 20% 18%;
    --sidebar-accent-foreground: 40 33% 96%;
    --sidebar-border: 350 20% 20%;
    --sidebar-ring: 350 50% 45%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

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

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Libre Baskerville', Georgia, serif;
  }
}

@layer components {
  .text-gradient-burgundy {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-burgundy);
  }
  
  .bg-gradient-burgundy {
    background: var(--gradient-burgundy);
  }
  
  .bg-gradient-gold {
    background: var(--gradient-gold);
  }
  
  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }
  
  .shadow-elevated {
    box-shadow: var(--shadow-elevated);
  }
  
  .shadow-burgundy {
    box-shadow: var(--shadow-burgundy);
  }
}

@layer utilities {
  .animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }
  
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}