@import "tailwindcss";

@theme {
  --font-serif: var(--font-playfair), serif;
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  
  --color-brand-black: #0a0a0a;
  --color-brand-gold: #C6A36B;
  --color-brand-green: #143b2a;
  --color-brand-offwhite: #faf9f6; 
  
  --spacing-section: 9rem;
  --spacing-section-tight: 6rem;

  --animate-fade-up: fade-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

@utility py-section {
  padding-top: var(--spacing-section);
  padding-bottom: var(--spacing-section);
}

@utility py-section-tight {
  padding-top: var(--spacing-section-tight);
  padding-bottom: var(--spacing-section-tight);
}

:root {
  --background: #faf9f6;
  --foreground: #0a0a0a;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

p {
  line-height: 1.7;
  letter-spacing: -0.01em;
}

@layer base {
  .container-custom {
    @apply max-w-[1440px] mx-auto px-8 lg:px-20;
  }
}

@layer utilities {
  .text-editorial {
    @apply font-serif text-3xl md:text-4xl lg:text-5xl leading-[1.1] tracking-[-0.03em];
  }
  .border-institutional {
    @apply border-black/5;
  }
  .bg-institutional {
    @apply bg-[#faf9f6];
  }
}