/* Planet Zoo 2 Theme Override */
/* Mood: light, warm, natural */

:root {
  --bg-dark: #fff2dd; /* zebrasStripe cream */
  --bg-card: #ffffff; /* pure white */
  --bg-card-hover: #fcf6ec;
  --bg-subtle: #f5eedf; /* subtle cream */
  --border: #d4c7b6; /* lighter olive/brown for borders */
  --border-highlight: #1c7265; /* parrotWingDark teal */
  --text-main: #333029; /* bearsPawDark dark brown */
  --text-muted: #596944; /* snakesScaleDark dark olive */
  --text-dim: #725b4b; /* bearsPaw brown */
  --accent-cyan: #1c7265; /* parrotWingDark teal for links */
  --accent-emerald: #596944; /* snakesScaleDark dark olive */
  --accent-amber: #eb8c4a; /* toucansBeakDark orange */
  --accent-rose: #ffc5c4; /* flamingosFeather pink */
}

/* Reset elements hardcoded to light/dark in styles.css & features.css */
.site-header { background-color: rgba(255, 242, 221, 0.94); }
.brand { color: var(--text-main); }
.nav-links a:hover { color: var(--accent-cyan); }

.hero-medieval {
  background: radial-gradient(ellipse at 80% 20%, rgba(138, 151, 81, 0.12) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 80%, rgba(255, 184, 89, 0.12) 0%, transparent 50%),
              linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-subtle) 100%);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.hero-title, .home-intent-title { color: var(--text-main); }
.hero-title-accent {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--accent-cyan);
}
.hero-tagline { color: var(--text-dim); }

.btn-primary {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
}
.btn-primary:hover {
  background: #13554b;
  border-color: #13554b;
  box-shadow: 0 4px 14px rgba(28, 114, 101, 0.3);
}
.btn-gold {
  background: rgba(235, 140, 74, 0.15);
  color: #a85816; /* AA compliant dark orange */
  border-color: rgba(235, 140, 74, 0.4);
}
.btn-gold:hover {
  background: rgba(235, 140, 74, 0.25);
  border-color: #a85816;
}

.hero-cover-card, .hero-image-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(51, 48, 41, 0.08);
}
.cover-art-title, .caption-title { color: var(--text-main); }
.cover-card-badge, .thumb-overlay-badge, .hero-image-badge,
.figure-badge-preview, .card-badge-preview, .status-pill-draft, 
.schematic-badge, .slot-badge {
  background: rgba(235, 140, 74, 0.15);
  color: #a85816; /* AA compliant text */
  border-color: rgba(235, 140, 74, 0.4);
}
.cover-card-footer, .hero-image-caption {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.hero-image-wrap { background: var(--bg-subtle); }

.preview-figure-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(51, 48, 41, 0.08);
}
.preview-figure-header, .preview-figure-caption {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.preview-figure-caption strong { color: var(--text-main); }
.preview-figure-img-wrap { background: var(--bg-card); }
.figure-legal-warning { color: #a85816; }

.section-title, .guide-card-title, .card-title, .slot-title, .article-footer-title {
  color: var(--text-main);
}
.start-card:hover .card-title { color: var(--accent-cyan); }

.card-thumb-wrap { background: var(--bg-subtle); border-bottom-color: var(--border); }
.visual-slot-frame {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(245, 238, 223, 0.8) 100%);
  border-color: var(--border);
}

.article-content { color: var(--text-main); }
.article-content h2, .article-title, .video-facade-content h3, .sources-section h3, .callout-title {
  color: var(--text-main);
}
.meta-box-val { color: var(--text-main); }

.roadmap-table th, .article-content table th, .home-intent-data th, .data-table th {
  background: var(--bg-subtle);
  color: var(--text-main);
  border-color: var(--border);
}
.article-content table td, .home-intent-data td {
  background: var(--bg-card);
  color: var(--text-main);
}

.video-facade-card {
  background: var(--bg-card);
  border-color: var(--border);
}

.ui-breakdown-card, .schematic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(51, 48, 41, 0.06);
}
.schematic-header, .schematic-footer { border-color: var(--border); }
.ui-column {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.ui-column-header {
  color: var(--text-main);
  border-bottom-color: var(--border);
}
.ui-column-body { color: var(--text-main); }

.answer-hero-box {
  background: var(--bg-subtle);
  border: 1px solid rgba(89, 105, 68, 0.4);
  box-shadow: 0 4px 20px rgba(89, 105, 68, 0.1);
}
.answer-summary { color: var(--text-main); }
.answer-step-row { color: var(--text-main); }
.answer-step-num {
  background: rgba(89, 105, 68, 0.15);
  color: var(--accent-emerald);
  border-color: rgba(89, 105, 68, 0.3);
}

.data-table tbody tr:nth-child(even) { background: rgba(51, 48, 41, 0.03); }
.data-table tbody tr:hover { background: rgba(51, 48, 41, 0.06); }
.data-table th button { color: var(--text-main); }
.data-table th.calc-col, .data-table td.calc-col { background-color: rgba(138, 151, 81, 0.2); }
.table-filter { background: var(--bg-card); color: var(--text-main); }

.site-footer {
  background-color: var(--bg-subtle);
  border-top-color: var(--border);
  color: var(--text-dim);
}
.site-footer a { color: var(--accent-cyan); }
.site-footer a:hover { color: #13554b; }

.consent-banner { background: var(--bg-card); color: var(--text-main); border-top: 1px solid var(--border); }
.consent-banner a { color: var(--accent-cyan); }

.toc { background: var(--bg-card); border-color: var(--border); }
.toc .toc-title { color: var(--text-main); }
.toc a { color: var(--text-muted); }
.toc a:hover { color: var(--accent-cyan); }

.home-intent-reviewed { color: var(--text-dim); border-top-color: var(--border); }

/* Contrast fixes added by Claude after an automated WCAG check (2026-10-03) */
.home-intent-data h2,
.home-intent-data h3 {
  color: var(--text-main);
}
.media-credit,
figcaption.media-credit {
  color: #725b4b;
}
.media-credit a {
  color: #1c7265;
}
.slot-badge {
  color: #7a3c0c;
}