@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --color-brand-bg: #FDFCF9;
  --color-brand-dark: #1A1A1A;
  --color-brand-accent: #C5A17A;
  --color-brand-muted: #F3F1ED;
  
  --shadow-editorial: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
}

@layer base {
  body {
    @apply font-sans bg-brand-bg text-brand-dark selection:bg-brand-accent/20;
  }
  
  h1, h2, h3 {
    @apply font-sans tracking-tight font-extrabold leading-[1.1];
  }
}

.editorial-card {
  @apply bg-white border border-black/5 rounded-3xl shadow-editorial transition-all duration-500 hover:shadow-2xl hover:border-black/10;
}

.dark-section {
  @apply bg-brand-dark text-white;
}

.accent-pill {
  @apply px-4 py-1.5 rounded-full border border-brand-accent/30 text-brand-accent text-[11px] font-black uppercase tracking-widest bg-brand-accent/5;
}

.premium-button {
  @apply bg-brand-dark text-white px-8 py-3.5 rounded-xl font-black text-sm transition-all hover:scale-[1.02] active:scale-95 hover:shadow-xl;
}