@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

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

:root {
  --bg: #f7f4ee;
  --bg-elevated: #fbf9f4;
  --ink: #1a1814;
  --ink-soft: #4a4640;
  --ink-muted: #8a847a;
  --line: #e6e0d4;
  --line-soft: #efeae0;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-feature-settings: 'ss01';
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.animate-fade-up {
  animation: fade-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}