/* Geological Predictions — Ukiyo-e Earthquake Theme
   Deep crimson, Japanese woodblock aesthetic, tectonic energy */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700;900&display=swap');

/* ── Override the global design tokens ─────────────────────── */
:root {
  --bg-primary:       #0a0508 !important;
  --bg-secondary:     #120a0d !important;
  --bg-tertiary:      #1a0e12 !important;
  --bg-card:          #150b0e !important;

  --text-primary:     #f0e6e8 !important;
  --text-secondary:   #b89a9f !important;
  --text-muted:       #6b4a52 !important;

  --accent-primary:   #c9342e !important;
  --accent-secondary: #e85d4a !important;
  --accent-warm:      #d4443a !important;
  --accent-danger:    #c9342e !important;
  --accent-green:     #d4443a !important;
  --accent-cyan:      #e85d4a !important;

  --border:           #2d1520 !important;
  --border-light:     #1e1015 !important;

  --shadow-glow:      0 0 30px rgba(201, 52, 46, 0.08) !important;
}

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201, 52, 46, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 30, 25, 0.08) 0%, transparent 50%),
    #0a0508 !important;
}

/* Hero overlay — crimson gradient wash */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 5, 8, 0) 0%,
    rgba(10, 5, 8, 0.3) 60%,
    rgba(10, 5, 8, 0.95) 100%
  ) !important;
}

/* ── Typography — Japanese serif influence ──────────────────── */
.content h1 {
  font-family: 'Noto Serif JP', 'Playfair Display', serif !important;
  font-weight: 900 !important;
  color: #f0e6e8 !important;
  letter-spacing: -0.02em;
  border-bottom: 3px solid #c9342e !important;
  padding-bottom: 0.6em;
  margin-bottom: 1.2em;
}

.content h2 {
  font-family: 'Noto Serif JP', 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: #e8d0d3 !important;
}

/* Section number badges — crimson */
.content h2 .section-num {
  background: linear-gradient(135deg, #c9342e, #8b1e19) !important;
  color: #f0e6e8 !important;
}

.content h3 {
  font-family: 'Noto Serif JP', 'Playfair Display', serif !important;
  font-weight: 600 !important;
  color: #d4b0b5 !important;
}

/* ── Blockquote — the one-line pitch ───────────────────────── */
.content blockquote {
  border-left-color: #c9342e !important;
  background: rgba(201, 52, 46, 0.06) !important;
  color: #e8d0d3 !important;
  font-family: 'Noto Serif JP', serif;
  font-style: italic;
}

/* ── Table — prediction chain ──────────────────────────────── */
.content table {
  border-color: #3d1f2e !important;
}

.content table th {
  background: rgba(201, 52, 46, 0.15) !important;
  border-color: #3d1f2e !important;
  color: #e8d0d3 !important;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
}

.content table td {
  border-color: #2d1520 !important;
}

.content table tr:hover td {
  background: rgba(201, 52, 46, 0.05) !important;
}

/* ── Callout overrides — all crimson tones ─────────────────── */
.callout-red {
  border-left-color: #c9342e !important;
  background: rgba(201, 52, 46, 0.1) !important;
}

.callout-tech {
  border-left-color: #8b3a35 !important;
  background: rgba(139, 58, 53, 0.08) !important;
}

.callout-insight {
  border-left-color: #9b4a45 !important;
  background: rgba(155, 74, 69, 0.08) !important;
}

.callout-gold {
  border-left-color: #d4443a !important;
  background: rgba(212, 68, 58, 0.08) !important;
}

/* ── Code blocks ───────────────────────────────────────────── */
.content code {
  background: rgba(201, 52, 46, 0.1) !important;
  color: #e85d4a !important;
}

.content pre {
  border-color: #2d1520 !important;
  background: #120a0d !important;
}

/* ── Links ─────────────────────────────────────────────────── */
.content a {
  color: #e85d4a !important;
  text-decoration-color: rgba(232, 93, 74, 0.3) !important;
}

.content a:hover {
  color: #ff7a6a !important;
}

/* ── Strong emphasis ───────────────────────────────────────── */
.content strong {
  color: #f0e6e8 !important;
}

/* ── Horizontal rule — tectonic crack ──────────────────────── */
.content hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    #c9342e 20%,
    #8b1e19 50%,
    #c9342e 80%,
    transparent 100%
  ) !important;
  margin: 2.5em 0;
}

/* ── Section numbering line — crimson ──────────────────────── */
.content h2::after {
  background: linear-gradient(to right, #c9342e, transparent) !important;
}

/* ── TOC / sidebar ─────────────────────────────────────────── */
.toc-toggle {
  border-color: #2d1520 !important;
  background: #120a0d !important;
  color: #b89a9f !important;
}

.toc-panel {
  background: #0a0508 !important;
  border-color: #2d1520 !important;
}

.toc-panel a {
  color: #b89a9f !important;
}

.toc-panel a:hover,
.toc-panel a.active {
  color: #e85d4a !important;
}

/* ── Footer — match theme ──────────────────────────────────── */
.footer {
  border-top-color: #2d1520 !important;
}

.footer-town-mark {
  color: #6b4a52 !important;
}

/* ── Section images — red tinted borders ───────────────────── */
.content .section-visual {
  border-color: #2d1520 !important;
}

.content .section-visual img {
  border-color: #2d1520 !important;
}

/* ── List markers ──────────────────────────────────────────── */
.content ul li::marker,
.content ol li::marker {
  color: #c9342e !important;
}

/* ── Idea-link cards — crimson hover ───────────────────────── */
.idea-link {
  border-color: #2d1520 !important;
  background: #120a0d !important;
}

.idea-link:hover {
  border-color: #c9342e !important;
  background: rgba(201, 52, 46, 0.06) !important;
}

/* ── Scrollbar — subtle crimson ────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: #3d1f2e !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #c9342e !important;
}