/* OSC — Ender Green / Hegemon Amber / Void Blue theme, Orson Scott Card
   Brand foundation loaded from brand.css */

/* ═══════════════════════════════════════════
   1. COLOR PALETTE & SEMANTIC OVERRIDES
   ═══════════════════════════════════════════ */

:root {
  --ender: #1B5E20;
  --ender-light: #E8F5E9;
  --ender-mid: #2E7D32;
  --ender-dark: #0d3012;
  --hegemon: #E65100;
  --hegemon-light: #FFF3E0;
  --hegemon-mid: #EF6C00;
  --void: #1A237E;

  /* Semantic overrides */
  --page-bg: #FAFAFA;
  --page-text: #212121;
  --page-text-light: #757575;
  --link: var(--ender);
  --link-hover: var(--void);
  --accent: var(--ender);
  --accent-light: var(--ender-light);
  --accent-dark: var(--ender-dark);
  --card-bg: white;
  --card-border: #C8E6C9;
  --card-shadow: rgba(27,94,32,0.12);
  --border: #C8E6C9;
  --parchment: var(--ender-light);
}

/* ═══════════════════════════════════════════
   2. HEADER — ender/void gradient
   ═══════════════════════════════════════════ */

header {
  background: linear-gradient(135deg, #0d3012 0%, #1B5E20 40%, #1A237E 100%);
  border-bottom: 4px solid var(--hegemon);
  position: relative;
  overflow: hidden;
}
header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(27,94,32,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(26,35,126,0.2) 0%, transparent 60%);
  pointer-events: none;
}
header > * { position: relative; z-index: 1; }
header h1 { color: #E8F5E9; }
header .subtitle { color: #A5D6A7; }

/* ═══════════════════════════════════════════
   3. TYPOGRAPHY COLOR OVERRIDES
   ═══════════════════════════════════════════ */

h2 {
  color: var(--ender-dark);
  border-bottom-color: var(--ender-light);
  padding-bottom: 0.3rem;
}
h3 { color: var(--ender); }

/* ═══════════════════════════════════════════
   4. THEMED COMPONENTS
   ═══════════════════════════════════════════ */

blockquote {
  background: var(--ender-light);
  border-left: 4px solid var(--ender);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  color: #374151;
}

th { background: var(--ender-dark); }
td { border-bottom-color: #F3F4F6; }
tr:nth-child(even) { background: rgba(27,94,32,0.04); }
tr:hover { background: rgba(27,94,32,0.08); }

pre {
  background: #0d1b12;
  color: #E2E8F0;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  line-height: 1.6;
  border-left: 3px solid var(--ender-mid);
}
code {
  background: var(--ender-light);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  color: var(--ender);
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ═══════════════════════════════════════════
   5. CARDS — border-color hover
   ═══════════════════════════════════════════ */

main { max-width: 54rem; }

.card {
  border-color: #C8E6C9;
  border-radius: 6px;
  padding: 1.2rem;
  position: relative;
}
.card:hover { box-shadow: 0 2px 12px rgba(27,94,32,0.12); border-color: var(--ender); }

/* ═══════════════════════════════════════════
   6. STATS — grid layout
   ═══════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  padding: 0;
  background: none;
  border: none;
}
.stat {
  background: white;
  border: 1px solid #C8E6C9;
  border-radius: 6px;
  padding: 0.8rem;
}
.stat-value {
  font-size: 1.5rem;
  color: var(--ender);
}

/* ═══════════════════════════════════════════
   7. TAGS
   ═══════════════════════════════════════════ */

.tag { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-bio { background: var(--ender-light); color: var(--ender); }
.tag-lit { background: #FFF3E0; color: var(--hegemon); }
.tag-craft { background: #E8EAF6; color: var(--void); }
.tag-faith { background: #F3E5F5; color: #7B1FA2; }
.tag-legacy { background: #ECEFF1; color: #37474F; }

/* ═══════════════════════════════════════════
   8. SPECIAL COMPONENTS
   ═══════════════════════════════════════════ */

.safety-callout {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-left: 4px solid #DC2626;
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.safety-callout strong { color: #DC2626; }

.cross-links {
  background: white;
  border: 1px solid #C8E6C9;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.cross-links h4 { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--ender); font-family: system-ui, sans-serif; }
.cross-links ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cross-links li a {
  display: inline-block;
  background: var(--ender-light);
  padding: 0.25rem 0.75rem;
  border-radius: 3px;
  font-size: 0.82rem;
  font-family: system-ui, sans-serif;
  color: var(--ender);
  transition: background 0.2s;
}
.cross-links li a:hover { background: #A5D6A7; text-decoration: none; }

/* ═══════════════════════════════════════════
   9. RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}