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

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

/* Ensure font-display: swap for all fonts (CWV optimization) */
@font-face {
  font-family: 'Libre Baskerville';
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-display: swap;
}

@layer base {
  :root {
    /* Slate-Teal Color Scheme */
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;

    /* Primary: Teal */
    --primary: 174 62% 35%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 174 62% 28%;

    /* Secondary: Slate */
    --secondary: 215 20% 93%;
    --secondary-foreground: 215 25% 25%;

    --muted: 210 15% 95%;
    --muted-foreground: 215 15% 45%;

    /* Accent: Warm Teal */
    --accent: 174 50% 42%;
    --accent-foreground: 0 0% 100%;

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

    --border: 215 20% 88%;
    --input: 215 20% 88%;
    --ring: 174 62% 35%;

    --radius: 0.5rem;

    /* Custom Colors */
    --slate-dark: 215 25% 20%;
    --slate-medium: 215 20% 35%;
    --slate-light: 215 15% 60%;
    --teal-dark: 174 62% 25%;
    --teal-light: 174 45% 85%;
    --gold: 45 90% 55%;
    --success: 145 60% 40%;
    --warning: 35 90% 55%;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(215 25% 12% / 0.85), hsl(174 62% 20% / 0.75));
    --gradient-cta: linear-gradient(135deg, hsl(var(--primary)), hsl(174 62% 28%));
    --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 20% 98%));
    --gradient-dark: linear-gradient(180deg, hsl(215 25% 15%), hsl(215 25% 10%));

    /* Shadows */
    --shadow-sm: 0 1px 2px hsl(215 25% 15% / 0.05);
    --shadow-md: 0 4px 12px hsl(215 25% 15% / 0.08);
    --shadow-lg: 0 12px 40px hsl(215 25% 15% / 0.12);
    --shadow-xl: 0 20px 60px hsl(215 25% 15% / 0.15);
    --shadow-teal: 0 8px 30px hsl(174 62% 35% / 0.25);

    /* Typography */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;

    --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: 215 25% 10%;
    --foreground: 210 20% 95%;

    --card: 215 25% 13%;
    --card-foreground: 210 20% 95%;

    --popover: 215 25% 13%;
    --popover-foreground: 210 20% 95%;

    --primary: 174 55% 45%;
    --primary-foreground: 215 25% 10%;

    --secondary: 215 20% 18%;
    --secondary-foreground: 210 15% 85%;

    --muted: 215 20% 18%;
    --muted-foreground: 215 15% 60%;

    --accent: 174 50% 50%;
    --accent-foreground: 215 25% 10%;

    --destructive: 0 62% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 215 20% 22%;
    --input: 215 20% 22%;
    --ring: 174 55% 45%;
  }
}

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

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-family: var(--font-body);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    @apply font-bold tracking-tight;
  }
}

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

  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-cta);
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground font-semibold px-6 py-3 rounded-lg transition-all duration-300;
    box-shadow: var(--shadow-teal);
  }

  .btn-primary:hover {
    background-color: hsl(var(--primary-hover));
    transform: translateY(-2px);
    box-shadow: 0 12px 35px hsl(174 62% 35% / 0.35);
  }

  .btn-secondary {
    @apply bg-secondary text-secondary-foreground font-semibold px-6 py-3 rounded-lg border-2 border-transparent transition-all duration-300;
  }

  .btn-secondary:hover {
    @apply border-primary;
    transform: translateY(-2px);
  }

  .card-elevated {
    @apply bg-card rounded-xl;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
  }

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

  .hero-overlay {
    background: var(--gradient-hero);
  }

  .section-padding {
    @apply py-16 md:py-24;
  }

  .badge-trust {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium;
    background: hsl(var(--teal-light));
    color: hsl(var(--teal-dark));
  }

  .link-hover {
    @apply relative;
  }

  .link-hover::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
  }

  .link-hover:hover::after {
    @apply w-full;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
  }

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

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

  .animate-scale-in {
    animation: scaleIn 0.4s ease-out forwards;
  }

  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }

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

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

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

  @keyframes scaleIn {
    from { 
      opacity: 0;
      transform: scale(0.9);
    }
    to { 
      opacity: 1;
      transform: scale(1);
    }
  }

  .stagger-1 { animation-delay: 0.1s; }
  .stagger-2 { animation-delay: 0.2s; }
  .stagger-3 { animation-delay: 0.3s; }
  .stagger-4 { animation-delay: 0.4s; }
  .stagger-5 { animation-delay: 0.5s; }
}