/* PixelPops Press - Two-Toned Tabletop Theme Stylesheet */
:root {
  /* Warm Tabletop Parchment & Antique Bronze Palette */
  --bg-primary: #F7F3EE;
  --bg-surface: #EFE9E0;
  --bg-card: #FFFFFF;
  --border-subtle: #DECFC0;
  --border-dark: #2E261E;
  --accent-gold: #9E6E24;
  --accent-gold-light: #B8842E;
  --accent-gold-dark: #785217;
  --text-main: #1C1611;
  --text-muted: #5C4F42;
  --font-serif: 'Cinzel', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Subtle Grid Texture for Parchment */
.bg-grid-light {
  background-image: 
    linear-gradient(to right, rgba(120, 82, 23, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 82, 23, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Subtle Grid Texture for Dark Zones */
.bg-grid-dark {
  background-image: 
    linear-gradient(to right, rgba(212, 163, 89, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 163, 89, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Typography */
.font-display {
  font-family: var(--font-serif);
  letter-spacing: 0.03em;
}

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

/* Gold Gradient for Dark Backgrounds */
.gold-gradient-dark {
  background: linear-gradient(135deg, #FFF7E6 0%, #E8BC75 50%, #D4A359 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Gold Gradient for Light Backgrounds */
.gold-gradient-light {
  background: linear-gradient(135deg, #785217 0%, #9E6E24 50%, #C48E33 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Clean, Undistorted Flat Book Cover Display */
.book-cover-card {
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
  box-shadow: 0 8px 20px -3px rgba(60, 40, 20, 0.22), 0 3px 6px -2px rgba(60, 40, 20, 0.12);
  border-radius: 4px;
}

.book-cover-card:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 0 16px 30px -4px rgba(60, 40, 20, 0.28), 0 0 20px rgba(184, 132, 46, 0.25);
}

/* Custom Buttons */
.btn-gold {
  background: linear-gradient(135deg, #B8842E 0%, #9E6E24 100%);
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(158, 110, 36, 0.25);
}

.btn-gold:hover {
  background: linear-gradient(135deg, #C9933B 0%, #B8842E 100%);
  box-shadow: 0 6px 18px rgba(158, 110, 36, 0.38);
  transform: translateY(-2px);
}

.btn-outline-gold-dark {
  background: transparent;
  color: #E8BC75;
  border: 1.5px solid #D4A359;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-outline-gold-dark:hover {
  background: rgba(212, 163, 89, 0.15);
  color: #FFFFFF;
  border-color: #E8BC75;
  box-shadow: 0 4px 15px rgba(212, 163, 89, 0.2);
}

.btn-outline-gold-light {
  background: transparent;
  color: #785217;
  border: 1.5px solid #9E6E24;
  font-weight: 600;
  transition: all 0.25s ease;
}

.btn-outline-gold-light:hover {
  background: rgba(184, 132, 46, 0.12);
  color: #1C1611;
  border-color: #785217;
  box-shadow: 0 4px 12px rgba(158, 110, 36, 0.15);
}

/* Filter pills */
.filter-btn {
  transition: all 0.2s ease;
  border: 1px solid var(--border-subtle);
  background-color: #FAF7F2;
  color: var(--text-muted);
}

.filter-btn:hover {
  border-color: #9E6E24;
  color: var(--text-main);
  background-color: #FFFFFF;
}

.filter-btn.active {
  background-color: #9E6E24;
  border-color: #785217;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(158, 110, 36, 0.25);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #14100D;
}
::-webkit-scrollbar-thumb {
  background: #3D3227;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5C4F42;
}