/* StoryVault Light Theme Override for Behind-the-Story Articles
   Overrides the dark theme variables from styles.css to match the stories page */

:root {
  --bg: #f4f4f4;
  --bg-elevated: #ffffff;
  --panel: rgba(0, 0, 0, 0.03);
  --panel-hover: rgba(0, 0, 0, 0.05);
  --panel-strong: rgba(0, 0, 0, 0.06);
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-hover: rgba(0, 0, 0, 0.14);
  --text: #111111;
  --text-secondary: #555555;
  --muted: #888888;
  --accent: #971b11;
  --accent-light: #b22216;
  --accent-glow: rgba(151, 27, 17, 0.2);
  --success: #16a34a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
}

body {
  background: var(--bg);
  color: var(--text);
}

body::before {
  display: none;
}

/* Article category badge matches StoryVault accent */
.article-category {
  background: rgba(151, 27, 17, 0.1);
  color: var(--accent);
}

/* Header gradient text override for light bg */
.articles-header h1 {
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  color: var(--text);
}

/* Blockquote styling for light theme */
.article-body blockquote {
  background: rgba(0, 0, 0, 0.03);
  border-left-color: var(--accent);
  color: var(--text-secondary);
}

/* Links in article body */
.article-body a {
  color: var(--accent);
}

.article-body a:hover {
  color: var(--accent-light);
}

/* Story connection box for light theme */
.story-connection {
  background: linear-gradient(135deg, rgba(151, 27, 17, 0.05), rgba(151, 27, 17, 0.02));
  border-color: rgba(151, 27, 17, 0.15);
}

.story-connection-header {
  color: var(--accent);
}

.story-connection a.story-link {
  background: var(--accent);
}

.story-connection a.story-link:hover {
  background: var(--accent-light);
}

.story-connection a.library-link {
  color: var(--accent) !important;
  border-color: var(--accent);
}

.story-connection a.library-link:hover {
  background: rgba(151, 27, 17, 0.06);
  border-color: var(--accent-light);
  color: var(--accent-light) !important;
}

/* CTA button */
.cta-button {
  background: var(--accent);
}

.cta-button:hover {
  background: var(--accent-light);
  box-shadow: 0 8px 24px rgba(151, 27, 17, 0.2);
}

/* Nav links */
.nav-home:hover {
  color: var(--accent);
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-link:hover {
  color: var(--accent);
}

/* Author box */
.author-box {
  border-color: var(--stroke);
}

.author-avatar {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}

/* Meta read time */
.meta-read {
  color: var(--accent);
}

/* Newsletter CTA for light */
.newsletter-cta {
  background: linear-gradient(135deg, rgba(151, 27, 17, 0.04), rgba(151, 27, 17, 0.02));
  border-color: rgba(151, 27, 17, 0.12);
}

/* Footer */
.article-footer {
  border-color: var(--stroke);
}

.article-footer .footer-links a:hover {
  color: var(--accent);
}