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

@layer base {
  :root {
    --primary: 220 25% 18%;
    --primary-foreground: 40 20% 98%;
    --secondary: 40 15% 94%;
    --secondary-foreground: 220 20% 22%;
    --accent: 28 65% 45%;
    --accent-foreground: 40 20% 98%;
    --background: 40 20% 98%;
    --foreground: 220 18% 16%;
    --card: 40 18% 99%;
    --card-foreground: 220 18% 16%;
    --popover: 40 18% 99%;
    --popover-foreground: 220 18% 16%;
    --muted: 40 12% 92%;
    --muted-foreground: 220 10% 42%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 40 10% 88%;
    --input: 40 10% 88%;
    --ring: 28 65% 45%;
    --radius: 0.375rem;
    --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", system-ui, sans-serif;
  }

  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
    font-size: 1rem;
    line-height: 1.6;
  }

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

@layer components {
  .content-wrap {
    @apply mx-auto w-full max-w-[1060px] px-5 sm:px-6;
  }

  .section-tight {
    @apply py-16 md:py-20;
  }

  .section-default {
    @apply py-20 md:py-24;
  }

  .section-loose {
    @apply py-24 md:py-28;
  }

  .surface-muted {
    @apply bg-muted/60;
  }

  .surface-elevated {
    @apply bg-card border border-border/80;
  }

  .grain-overlay {
    position: relative;
  }

  .grain-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
  }
}

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

  .animate-fade-up {
    animation: fade-up 0.7s ease-out both;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-fade-up {
      animation: none;
    }
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

.animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}

.animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}