/**
 * UNIFIED BACKGROUND SYSTEM
 * Consistent section backgrounds across the entire site
 * 
 * Strategy:
 * - Hero gradient remains unique (signature element)
 * - Alternating sections use subtle variations of deep black
 * - Maintains visual distinction while ensuring consistency
 */

:root {
  /* Background Palette */
  --bg-void: #000000;                    /* Pure black base */
  --bg-charcoal: #0E0F10;                /* Hero/primary sections */
  --bg-slate: #1a1c20;                   /* Subtle variation */
  --bg-graphite: #151618;                /* Mid-tone alternative */
  
  /* Gradient overlays for texture */
  --overlay-subtle: rgba(14, 15, 16, 0.5);
  --overlay-medium: rgba(14, 15, 16, 0.7);
  --overlay-heavy: rgba(14, 15, 16, 0.9);
}

/* ============================================
   BASE BODY BACKGROUND
   ============================================ */
body {
  background: var(--bg-void);
}

/* ============================================
   HERO SECTION
   Signature radial gradient - unique to homepage hero
   ============================================ */
.bg-hero {
  background: radial-gradient(circle at center, #1a1c20 0%, #000000 100%);
}

/* ============================================
   SECTION BACKGROUNDS
   Alternating pattern for visual rhythm
   ============================================ */

/* Primary sections - Pure black with very subtle texture */
.bg-section-primary {
  background: linear-gradient(180deg, #000000 0%, #0a0a0b 100%);
}

/* Secondary sections - Subtle charcoal warmth */
.bg-section-secondary {
  background: linear-gradient(180deg, #0E0F10 0%, #000000 100%);
}

/* Tertiary sections - Slight slate variation */
.bg-section-tertiary {
  background: linear-gradient(180deg, #151618 0%, #0E0F10 100%);
}

/* Accent sections - Very subtle color tint for special areas */
.bg-section-accent {
  background: linear-gradient(
    180deg, 
    rgba(14, 15, 16, 1) 0%, 
    rgba(199, 255, 65, 0.02) 50%,
    rgba(14, 15, 16, 1) 100%
  );
}

/* ============================================
   SPECIFIC USE CASES
   ============================================ */

/* Marquee/Strip sections - blend into surroundings */
.bg-marquee {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

/* Footer - Slightly elevated from void */
.bg-footer {
  background: linear-gradient(180deg, #0E0F10 0%, #000000 100%);
  border-top: 1px solid rgba(247, 243, 237, 0.1);
}

/* Navigation - Transparent with blur */
.bg-nav {
  background: rgba(14, 15, 16, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247, 243, 237, 0.1);
}

/* Cards/Content boxes - Slightly lighter for layering */
.bg-card {
  background: linear-gradient(135deg, #1a1c20 0%, #151618 100%);
  border: 1px solid rgba(247, 243, 237, 0.05);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Add subtle noise texture to any section */
.bg-noise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Add top border accent */
.border-accent-top {
  border-top: 1px solid rgba(253, 0, 9, 0.1);
}

/* Add bottom border accent */
.border-accent-bottom {
  border-bottom: 1px solid rgba(253, 0, 9, 0.1);
}

/* ============================================
   SECTION PATTERN GUIDE
   ============================================ */

/*
RECOMMENDED ALTERNATING PATTERN FOR PAGES:

Homepage:
1. Hero              → bg-hero (unique gradient)
2. Marquee           → bg-marquee (transparent overlay)
3. Featured Book     → bg-section-primary
4. Shop              → bg-section-secondary
5. Blog Preview      → bg-section-tertiary
6. Newsletter CTA    → bg-section-accent
7. Footer            → bg-footer

Interior Pages:
1. Header/Hero       → bg-section-primary
2. Main Content      → bg-section-secondary
3. Features/Grid     → bg-section-tertiary
4. CTA/Action        → bg-section-accent
5. Footer            → bg-footer

Blog Posts:
1. Article Header    → bg-section-primary
2. Article Body      → bg-section-secondary
3. Related Posts     → bg-section-tertiary
4. Newsletter CTA    → bg-section-accent
5. Footer            → bg-footer
*/

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Simplify gradients on mobile for performance */
  .bg-section-secondary,
  .bg-section-tertiary {
    background: var(--bg-charcoal);
  }
  
  .bg-section-accent {
    background: var(--bg-charcoal);
  }
}

/* ============================================
   DARK MODE CONSISTENCY
   ============================================ */

/* Ensure consistent darkness across browsers */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-void);
    color: #F7F3ED;
  }
}