/* Judy L. Studio - Atelier Minimalist Design System */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&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 {
  --surface: #FAF8F5;
  --surface-low: #F5F2EB;
  --surface-lowest: #FFFFFF;
  --surface-high: #EDE7E3;
  --surface-highest: #E7E1DE;
  --on-surface: #22201E;
  --on-surface-variant: #42474C;
  --tertiary: #76716B;
  --outline: #EAE5DC;
  --primary: #3F5F77;
  --primary-hover: #324D61;
  --primary-container: #587891;
  --secondary-container: #CFE2F0;
  --on-secondary-container: #374954;
  --max-width: 80rem;
}

html {
  scroll-behavior: smooth;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Typographic Flourishes */
.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Card Hover Enhancements */
.artwork-card-wrapper {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.artwork-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(34, 32, 30, 0.08), 0 4px 12px -2px rgba(34, 32, 30, 0.04);
}

/* Custom Scrollbar for Drawer & Modal */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #D8E5ED;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #5B7B94;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Subtle canvas texture overlay */
.canvas-subtle-pattern {
  background-image: radial-gradient(#22201e 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.03;
}

/* Interactive Placards */
.placard-item {
  border-bottom: 1px solid var(--outline);
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.placard-item:last-child {
  border-bottom: none;
}