@import "tailwindcss";

@theme {
  /* Design System - Colors */
  --color-primary-bg: #0d0402;
  --color-primary-text: #e4dad7;
  --color-primary-button: #850000;
  --color-card-bg: rgba(101, 101, 101, 0.12);
  --color-border: rgba(182, 152, 145, 0.2);
  --color-text-secondary: rgba(235, 213, 209, 0.62);
  --color-input-bg: rgba(224, 191, 184, 0.12);
  --color-input-placeholder: rgba(235, 213, 209, 0.4);

  /* Design System - Typography */
  --font-primary: "Domine", serif;
  --font-secondary: "Public Sans", sans-serif;

  /* Custom Colors for Tailwind */
  --color-foodplace-dark: #0d0402;
  --color-foodplace-cream: #e4dad7;
  --color-foodplace-red: #850000;
}

/* Enable smooth scrolling globally */
html {
  scroll-behavior: smooth;
}

/* Body and global styles */
body {
  background-color: #0d0402;
  color: #e4dad7;
  font-family: "Public Sans", sans-serif;
  margin: 0;
  padding: 0;
}

/* Ensure smooth scrolling works on all browsers */
* {
  scroll-behavior: smooth;
}

.gallery-stacked {
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-expanded {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Custom hover effects for expanded state */
.gallery-expanded:hover {
  transform: scale(1.05) !important;
  z-index: 100 !important;
}

/* Responsive utilities */
@media (max-width: 640px) {
  /* Adjust font sizes for very small screens */
  body {
    font-size: 14px;
  }
}

/* Smooth transitions for responsive elements */
@media (prefers-reduced-motion: no-preference) {
  * {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Fix for iOS Safari viewport height */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}