@import "tailwindcss";

:root {
  --color-bg: #faf7f2;
  --color-surface: #ffffff;
  --color-surface-muted: #f3ede6;
  --color-text: #1c1917;
  --color-muted: #57534e;
  --color-border: #e7e0d6;
  --color-primary: #7c1d2b;
  --color-primary-hover: #5c1520;
  --color-on-primary: #fffaf7;
  --color-accent: #b8860b;
  --color-accent-soft: #f5e6c8;
  --color-success: #0d9488;
  --font-display: var(--font-cormorant), "Georgia", serif;
  --font-ui: var(--font-dm-sans), system-ui, sans-serif;
}

@theme inline {
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --font-sans: var(--font-ui);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
}

.font-display {
  font-family: var(--font-display);
}

.grain::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 50;
}

.card-lift {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(28, 25, 23, 0.08);
}

@keyframes mock3d-rotate {
  from {
    transform: rotateY(-12deg) rotateX(4deg);
  }
  to {
    transform: rotateY(12deg) rotateX(4deg);
  }
}

.mock3d-plane {
  animation: mock3d-rotate 8s ease-in-out infinite alternate;
  transform-style: preserve-3d;
}