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

:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --color-ivory: #FAF9F6;
  --color-ivory-subtle: #F4F1EA;
  --color-dark: #18181B;
  --color-gold: #C5A059;
  --color-gold-hover: #B38F48;
  --color-gold-light: #FBF7EE;
  --color-gold-border: #E8D9BD;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-ivory);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
}

.font-serif {
  font-family: var(--font-serif);
}

.font-sans {
  font-family: var(--font-sans);
}

/* Elegant gold accents */
.text-gold {
  color: var(--color-gold);
}

.bg-gold {
  background-color: var(--color-gold);
}

.bg-gold:hover {
  background-color: var(--color-gold-hover);
}

.bg-gold-light {
  background-color: var(--color-gold-light);
}

.border-gold {
  border-color: var(--color-gold-border);
}

/* Subtle decorative embroidery dashed stitch lines */
.stitch-border {
  position: relative;
  border: 1px dashed #D1C7B7;
}

.stitch-border-top {
  border-top: 1px dashed #D1C7B7;
}

.stitch-border-bottom {
  border-bottom: 1px dashed #D1C7B7;
}

.embroidery-badge {
  background: linear-gradient(135deg, #FAF7EE 0%, #F5EEDB 100%);
  border: 1px solid #E5D5B8;
  color: #8C6D23;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Smooth transitions */
.transition-luxury {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card hover elevate */
.card-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

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

/* Fabric weave preview textures */
.fabric-linen {
  background-color: #F7F5F0;
  background-image: radial-gradient(#E8E3D7 1px, transparent 0);
  background-size: 8px 8px;
}

.fabric-denim {
  background-color: #263852;
  background-image: repeating-linear-gradient(45deg, #2b3e5a 0, #2b3e5a 2px, #21324a 2px, #21324a 4px);
}

.fabric-velvet {
  background: radial-gradient(circle at 50% 50%, #2D1525 0%, #150A12 100%);
}

.fabric-canvas {
  background-color: #F0EAD6;
  background-image: repeating-linear-gradient(0deg, #E5DCBF, #E5DCBF 1px, transparent 1px, transparent 6px),
                    repeating-linear-gradient(90deg, #E5DCBF, #E5DCBF 1px, transparent 1px, transparent 6px);
}

/* Format badges */
.format-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background-color: #F4F4F5;
  color: #3F3F46;
  border: 1px solid #E4E4E7;
  letter-spacing: 0.04em;
}

.format-pill.active {
  background-color: #FAF7EE;
  color: #926E1D;
  border-color: #DCCAA3;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #FAF9F6;
}

::-webkit-scrollbar-thumb {
  background: #D4AF37;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B38F48;
}

/* Toast container */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 380px;
  padding: 0.85rem 1.15rem;
  background: #18181B;
  color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}