@import "tailwindcss";

@theme {
  --font-sans: "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-display: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;

  --color-brand-50: #f8f7f4;
  --color-brand-100: #efede7;
  --color-brand-200: #dfdbd1;
  --color-brand-300: #cac3b4;
  --color-brand-400: #a79d89;
  --color-brand-500: #7f7460;
  --color-brand-600: #665c4b;
  --color-brand-700: #534a3d;
  --color-brand-800: #403a30;
  --color-brand-900: #2f2a23;

  --color-accent-100: #e8ebee;
  --color-accent-200: #d2d8df;
  --color-accent-400: #8f9fb1;
  --color-accent-600: #55657a;
  --color-accent-700: #445163;
}

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background-color: #fcfbf8;
  color: #2f2a23;
  margin: 0;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.brand-heading {
  font-family: var(--font-display);
}

.mesh-surface {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(127, 116, 96, 0.14), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(45, 212, 191, 0.12), transparent 35%);
}

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

.animate-float-soft {
  animation: floatSoft 6s ease-in-out infinite;
}

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

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
