/* Custom AvailSmart Design System Styles - Crookeries Luxury Editorial Edition */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&display=swap');

/* Prevent Alpine.js Flash of Unstyled Content (FOUC) */
[x-cloak] {
  display: none !important;
}

:root {
  --color-emerald-primary: #047857;
  --color-emerald-hover: #065F46;
  --color-emerald-dark: #064E3B;
  --color-mint-soft: #D1FAE5;
  --color-mint-tint: #ECFDF5;
  --color-accent-orange: #C2714F;
  --color-page-bg: #FAF8F5;
  --color-card-bg: #FFFFFF;
  --color-border: #EAE5DE;
  --color-text-main: #14241B;
  --color-text-muted: #66746D;
  --color-clay: #C2714F;
  --color-oat: #F5EFEB;
  --font-serif-editorial: 'Playfair Display', Georgia, serif;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-page-bg);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial Serif Utility */
.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Core Crookeries Architectural Classes */
.bg-alabaster { background-color: #FAF8F5; }
.bg-alabaster-card { background-color: #FFFFFF; }
.bg-alabaster-subtle { background-color: #F5EFEB; }
.border-sand { border-color: #EAE5DE; }
.text-forest { color: #14241B; }
.text-forest-muted { color: #66746D; }
.text-clay { color: #C2714F; }
.bg-clay { background-color: #C2714F; }
.bg-forest { background-color: #14241B; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F5EFEB;
}
::-webkit-scrollbar-thumb {
  background: #D9D2C7;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1E3A2B;
}

/* Glassmorphism & Frosted Alabaster blur */
.glass-header {
  background: rgba(250, 248, 245, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-crookeries {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Rotating Artisan Seal */
@keyframes rotateArtisanSeal {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating-seal {
  animation: rotateArtisanSeal 24s linear infinite;
}
.rotating-seal:hover {
  animation-play-state: paused;
}

/* Crookeries Luxury Card & Transitions */
.card-crookeries {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
.card-crookeries:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px -8px rgba(20, 36, 27, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.02);
}

.transition-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.transition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(20, 36, 27, 0.07), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
}

/* Animations */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.04); }
}
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}
.animate-pulse-subtle {
  animation: pulseSubtle 2s infinite ease-in-out;
}
.animate-heart-pop {
  animation: heartPop 0.3s ease-out;
}

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

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
}

/* Line clamp helpers */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Print Stylesheet for Invoices */
@media print {
  header, footer, nav, button, .no-print {
    display: none !important;
  }
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}