/* Jarjeer Mule & Donkey Refuge — Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --color-forest: #1E3527;
  --color-darkforest: #16271D;
  --color-sand: #FBF9F5;
  --color-terracotta: #C86043;
  --color-terracotta-dark: #B55237;
  --color-charcoal: #292524;
  --color-muted: #57534E;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  background-color: var(--color-sand);
  color: var(--color-charcoal);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

.font-display {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-body {
  font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Glassmorphism helpers */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
  background: rgba(22, 39, 29, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Drawer transitions */
.drawer-backdrop {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.drawer-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Toast alert */
#toast-container {
  pointer-events: none;
}
#toast-container > * {
  pointer-events: auto;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1EDE4;
}
::-webkit-scrollbar-thumb {
  background: #D5CEBE;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #B8B09E;
}