@import "tailwindcss";

:root {
  --background: #faf7f1;
  --foreground: #1f1b16;
  --selection: #c89aa2;
  --focus: #b08d57;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, sans-serif;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-warmIvory: #faf7f1;
  --color-bone: #f7f1e8;
  --color-sand: #d8c3a5;
  --color-espresso: #2b1a12;
  --color-darkLeather: #3a2418;
  --color-saddle: #8b5a35;
  --color-cognac: #a66a3f;
  --color-deepRose: #7a2e3a;
  --color-mutedRose: #a35d6a;
  --color-dustyRose: #c89aa2;
  --color-antiqueGold: #b08d57;
  --color-brass: #9c7a43;
  --color-charcoal: #1f1b16;
  --color-softBlack: #2a2520;
  --color-mutedBrown: #5b4636;
  --font-heading: var(--font-heading);
  --font-body: var(--font-body);
  --font-sans: var(--font-body);
  --radius-soft: 0.375rem;
  --shadow-soft: 0 18px 45px rgba(43, 26, 18, 0.08);
}

html {
  scroll-behavior: smooth;
  background: var(--background);
  overflow-x: hidden;
}

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

::selection {
  background: var(--selection);
  color: var(--foreground);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@keyframes hero-product-in {
  from {
    opacity: 0;
    transform: translate3d(18px, 12px, 0) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.hero-product-in {
  animation: hero-product-in 820ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-in {
    animation: none;
    will-change: auto;
  }
}