@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

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

:root {
  --cream: #fdf8f0;
  --cream-dark: #f2dab8;
  --espresso: #2c1a14;
  --espresso-mid: #50332a;
  --espresso-light: #9e7358;
  --gold: #d08445;
  --sage: #7a9972;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  color: var(--espresso);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
}
::-webkit-scrollbar-thumb {
  background: var(--espresso-light);
  border-radius: 3px;
}

/* Selection */
::selection {
  background: var(--gold);
  color: white;
}

/* Custom utility classes */
.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.text-balance {
  text-wrap: balance;
}

/* Tag styles */
.tag-bestseller {
  background: #d08445;
  color: white;
}
.tag-vegan {
  background: #7a9972;
  color: white;
}
.tag-new {
  background: #2c1a14;
  color: #fdf8f0;
}
.tag-local-favorite {
  background: #9e7358;
  color: white;
}
.tag-seasonal {
  background: #638060;
  color: white;
}

/* Grain texture overlay */
.grain-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  z-index: 9999;
}

/* Smooth card hover */
.product-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(44, 26, 20, 0.15);
}

/* Sticky nav blur */
.sticky-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #f2dab8 25%, #e8c08e 50%, #f2dab8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Admin panel */
.admin-section {
  border-left: 3px solid var(--gold);
}

/* Print styles for QR menu */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Responsive font sizes */
@media (max-width: 640px) {
  h1 { font-size: clamp(2rem, 8vw, 3rem); }
}

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Transition defaults */
.transition-default {
  transition: all 0.25s ease;
}

/* Diagonal separator */
.diagonal-separator {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* Background noise texture */
.bg-texture {
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(208, 132, 69, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(122, 153, 114, 0.06) 0%, transparent 40%);
}