@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* Font display swap for Core Web Vitals */
@font-face {
  font-family: 'Work Sans';
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  font-display: swap;
}

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

/* Garage Door Seattle - Rust-Sage Color Scheme with Work Sans + Spectral */

@layer base {
  :root {
    /* Rust-Sage Color Palette */
    --background: 40 33% 97%;
    --foreground: 20 20% 15%;

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

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

    /* Primary: Rust/Terracotta */
    --primary: 16 65% 45%;
    --primary-foreground: 40 33% 97%;

    /* Secondary: Sage Green */
    --secondary: 140 25% 45%;
    --secondary-foreground: 40 33% 97%;

    /* Muted: Warm Gray */
    --muted: 30 15% 92%;
    --muted-foreground: 20 10% 45%;

    /* Accent: Deep Rust */
    --accent: 12 70% 35%;
    --accent-foreground: 40 33% 97%;

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

    --border: 30 20% 85%;
    --input: 30 20% 85%;
    --ring: 16 65% 45%;

    --radius: 0.5rem;

    /* Additional brand colors */
    --rust-light: 18 60% 55%;
    --rust-dark: 14 70% 30%;
    --sage-light: 140 20% 60%;
    --sage-dark: 140 30% 30%;
    --cream: 40 40% 94%;
    --warm-white: 40 33% 98%;
    --charcoal: 20 15% 20%;

    /* Sidebar */
    --sidebar-background: 40 33% 97%;
    --sidebar-foreground: 20 20% 15%;
    --sidebar-primary: 16 65% 45%;
    --sidebar-primary-foreground: 40 33% 97%;
    --sidebar-accent: 140 25% 45%;
    --sidebar-accent-foreground: 40 33% 97%;
    --sidebar-border: 30 20% 85%;
    --sidebar-ring: 16 65% 45%;
  }

  .dark {
    --background: 20 15% 10%;
    --foreground: 40 33% 95%;

    --card: 20 15% 12%;
    --card-foreground: 40 33% 95%;

    --popover: 20 15% 12%;
    --popover-foreground: 40 33% 95%;

    --primary: 16 60% 50%;
    --primary-foreground: 20 15% 10%;

    --secondary: 140 20% 40%;
    --secondary-foreground: 40 33% 95%;

    --muted: 20 10% 20%;
    --muted-foreground: 30 15% 65%;

    --accent: 16 55% 45%;
    --accent-foreground: 40 33% 95%;

    --destructive: 0 62% 40%;
    --destructive-foreground: 40 33% 95%;

    --border: 20 10% 25%;
    --input: 20 10% 25%;
    --ring: 16 60% 50%;

    --sidebar-background: 20 15% 12%;
    --sidebar-foreground: 40 33% 95%;
    --sidebar-primary: 16 60% 50%;
    --sidebar-primary-foreground: 20 15% 10%;
    --sidebar-accent: 140 20% 35%;
    --sidebar-accent-foreground: 40 33% 95%;
    --sidebar-border: 20 10% 25%;
    --sidebar-ring: 16 60% 50%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold tracking-tight;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .diagonal-split {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }

  .diagonal-split-reverse {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  }

  .gradient-rust {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
  }

  .gradient-sage {
    background: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--sage-dark)) 100%);
  }

  .gradient-warm {
    background: linear-gradient(180deg, hsl(var(--warm-white)) 0%, hsl(var(--cream)) 100%);
  }

  .text-gradient-rust {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--rust-light)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .shadow-rust {
    box-shadow: 0 10px 40px -10px hsl(var(--primary) / 0.3);
  }

  .shadow-sage {
    box-shadow: 0 10px 40px -10px hsl(var(--secondary) / 0.3);
  }
}