/* Yudame Research - Base Styles
 * Design System v2.0
 *
 * Usage: Include this CSS on all pages for consistent background and foundation
 */

:root {
  /* Foundation Colors */
  --black: #000000;
  --white: #FFFFFF;
  --cream: #F5F1E8;

  /* Salmon Accent */
  --salmon: #E8B4A8;
  --salmon-light: #F5D5CC;
  --salmon-dark: #D89B8E;

  /* Grays */
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-600: #6B6B6B;
  --gray-800: #3A3A3A;

  /* Supporting Accents - Data visualization only */
  --teal: #4A7C8C;
  --yellow: #E8C547;
  --rust: #C8867A;

  /* Grid */
  --grid-size: 20px;
  --grid-color: #E5E5E5;
}

/* Subtle gradient background (matches homepage hero) */
.bg-gradient,
body.bg-gradient {
  background: linear-gradient(135deg, var(--white) 0%, var(--cream) 100%);
}

/* Graph Paper Background */
.bg-graph-paper,
body.bg-graph-paper {
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Graph Paper on Gradient */
.bg-graph-paper-light,
body.bg-graph-paper-light {
  background:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
    linear-gradient(135deg, var(--white) 0%, var(--cream) 100%);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
}

/* Paper Texture Overlay - apply to container with position: relative */
.paper-texture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above texture */
.paper-texture > * {
  position: relative;
  z-index: 1;
}

/* Plain cream background (no grid) */
.bg-cream {
  background-color: var(--cream);
}

/* White background */
.bg-white {
  background-color: var(--white);
}

/* Full page background setup */
html, body {
  margin: 0;
  padding: 0;
}

body.bg-graph-paper,
body.bg-graph-paper-light {
  min-height: 100vh;
  position: relative;
}

/* Add paper texture to body */
body.bg-graph-paper.paper-texture::before,
body.bg-graph-paper-light.paper-texture::before {
  position: fixed;
}

/* ================================
   Series Page Styles
   ================================ */

.series-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px; /* var(--space-6) var(--space-4) */
}

.page-header {
  margin-bottom: 48px; /* var(--space-6) */
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 8px 0;
}

.page-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: var(--gray-800);
  line-height: 1.8;
  margin-bottom: 24px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--black);
  margin: 0 0 24px 0;
}

/* Subscribe Buttons */
.subscribe-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.podcast-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 200ms ease;
}

.podcast-button:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  filter: brightness(1.1);
}

.podcast-button:focus {
  outline: 2px solid var(--salmon);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .series-content {
    padding: 24px 16px;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .page-tagline {
    font-size: 1rem;
  }

  .subscribe-buttons {
    flex-direction: column;
  }

  .podcast-button {
    justify-content: center;
  }
}