/* ════════════════════════════════════════════════════════════════════
 * Elf Revel Wiki Theme
 * ════════════════════════════════════════════════════════════════════
 * Layered on top of mdBook defaults via additional-css in book.toml.
 * Imports design tokens from docs/shared/design-tokens.css.
 * Override strategy: reassign mdBook CSS custom properties at :root,
 * never use !important, never target internal class names.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Font Face Declarations ────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/Cinzel-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Bridge mdBook Variables to Design Tokens ──────────────────────── */
/* Navy = Forest Canopy (default). Scoped to .navy, NOT :root,
 * so other theme classes (.coal, .ayu, .light, .rust) can override. */

.navy {
  --bg: var(--color-surface);
  --fg: var(--color-text);
  --sidebar-bg: var(--color-sidebar-bg);
  --sidebar-fg: var(--color-sidebar-text);
  --sidebar-non-existant: var(--color-text-muted);
  --sidebar-active: var(--color-sidebar-active);
  --sidebar-spacer: var(--color-border);
  --links: var(--color-link);
  --inline-code-color: var(--color-code-text);
  --theme-popup-bg: var(--color-surface-elevated);
  --theme-popup-border: var(--color-border);
  --quote-bg: var(--color-surface-elevated);
  --quote-border: var(--color-border-accent);
  --table-border-color: var(--color-border);
  --table-header-bg: var(--color-surface-elevated);
  --table-alternate-bg: rgba(255, 255, 255, 0.02);
  --searchbar-border-color: var(--color-border);
  --searchbar-bg: var(--color-surface-elevated);
  --searchbar-fg: var(--color-text);
  --searchresults-header-fg: var(--color-heading-primary);
  --searchresults-border-color: var(--color-border);
  --color-scheme: dark;

  /* Semantic colors for Forest Canopy */
  --color-surface: #1a1a15;
  --color-surface-elevated: #25251f;
  --color-text: #f0e8d8;
  --color-text-muted: #a09880;
  --color-heading-primary: #c8a84b;
  --color-heading-secondary: #8ab88a;
  --color-link: #7eb87e;
  --color-link-hover: #c8a84b;
  --color-gold: #c8a84b;
  --color-border: #2a2a22;
  --color-border-accent: #3a3a30;
  --color-code-bg: #25251f;
  --color-code-text: #d4c8b0;
  --color-sidebar-bg: #14140f;
  --color-sidebar-text: #c0b8a0;
  --color-sidebar-active: #c8a84b;
}

/* ════════════════════════════════════════════════════════════════════
 * THEME VARIANTS
 * ════════════════════════════════════════════════════════════════════
 * Navy = Forest Canopy (default, defined in :root above)
 * Coal = Deep Archive (charcoal/silver scholarly)
 * Ayu  = Terminal (retro TUI, monospace, amber/green)
 * Light = Parchment (earthy light mode, cream/brown)
 * Rust = Clean Modern (minimal, one accent color)
 * ════════════════════════════════════════════════════════════════════ */

/* ── Coal: Deep Archive ────────────────────────────────────────────── */
/* Charcoal depths, silver accents, scholarly atmosphere.
 * Like reading ancient texts in a stone library by candlelight. */

.coal {
  --bg: #121215;
  --fg: #c8c8d0;
  --sidebar-bg: #0e0e11;
  --sidebar-fg: #a0a0b0;
  --sidebar-non-existant: #555568;
  --sidebar-active: #b0b0c8;
  --sidebar-spacer: #222230;
  --links: #8a9ab8;
  --inline-code-color: #b0b0c0;
  --theme-popup-bg: #1a1a20;
  --theme-popup-border: #333340;
  --theme-hover: #1e1e28;
  --quote-bg: #16161c;
  --quote-border: #2a2a38;
  --table-border-color: #222230;
  --table-header-bg: #1e1e28;
  --table-alternate-bg: rgba(255, 255, 255, 0.015);
  --searchbar-border-color: #444;
  --searchbar-bg: #1e1e28;
  --searchbar-fg: #c8c8d0;
  --searchresults-header-fg: #b0b0c8;
  --searchresults-border-color: #333340;
  --color-scheme: dark;

  /* Semantic overrides */
  --color-surface: #121215;
  --color-surface-elevated: #1a1a20;
  --color-text: #c8c8d0;
  --color-text-muted: #808098;
  --color-heading-primary: #b0b0c8;    /* silver */
  --color-heading-secondary: #8a8aa8;  /* muted lavender */
  --color-link: #8a9ab8;
  --color-link-hover: #b0b0c8;
  --color-gold: #b0b0c8;              /* silver replaces gold in this theme */
  --color-border: #222230;
  --color-border-accent: #333340;
  --color-code-bg: #16161c;
  --color-code-text: #b8b8c8;
  --color-sidebar-bg: #0e0e11;
  --color-sidebar-text: #a0a0b0;
  --color-sidebar-active: #b0b0c8;
}

/* ── Ayu: Terminal ─────────────────────────────────────────────────── */
/* Retro TUI aesthetic — monospace everything, amber/green on black.
 * The wiki looks like part of the game itself. */

.ayu {
  --bg: #0a0a08;
  --fg: #33cc33;
  --sidebar-bg: #080806;
  --sidebar-fg: #33aa33;
  --sidebar-non-existant: #1a661a;
  --sidebar-active: #ffaa00;
  --sidebar-spacer: #1a1a14;
  --links: #33bb33;
  --inline-code-color: #ffaa00;
  --theme-popup-bg: #0e0e0a;
  --theme-popup-border: #2a4a2a;
  --theme-hover: #121210;
  --quote-bg: #0e0e0a;
  --quote-border: #2a4a2a;
  --table-border-color: #1a331a;
  --table-header-bg: #142014;
  --table-alternate-bg: rgba(51, 204, 51, 0.03);
  --searchbar-border-color: #33aa33;
  --searchbar-bg: #0e0e0a;
  --searchbar-fg: #33cc33;
  --searchresults-header-fg: #ffaa00;
  --searchresults-border-color: #2a4a2a;
  --color-scheme: dark;

  /* Semantic overrides */
  --color-surface: #0a0a08;
  --color-surface-elevated: #121210;
  --color-text: #33cc33;
  --color-text-muted: #228822;
  --color-heading-primary: #ffaa00;    /* amber */
  --color-heading-secondary: #44dd44;  /* bright green */
  --color-link: #33bb33;
  --color-link-hover: #ffaa00;
  --color-gold: #ffaa00;
  --color-border: #1a331a;
  --color-border-accent: #2a4a2a;
  --color-code-bg: #0e0e0a;
  --color-code-text: #ffaa00;
  --color-sidebar-bg: #080806;
  --color-sidebar-text: #33aa33;
  --color-sidebar-active: #ffaa00;

  /* Terminal theme: override to monospace for everything */
  --font-heading: var(--font-code);
  --font-body: var(--font-code);
}

/* Terminal theme: monospace body override */
.ayu body {
  font-family: var(--font-code);
  letter-spacing: -0.01em;
}

.ayu .content h1,
.ayu .content h2,
.ayu .content h3,
.ayu .content h4,
.ayu .content h5 {
  font-family: var(--font-code);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Terminal HR: ASCII-style divider */
.ayu .content hr {
  background: none;
  height: auto;
  text-align: center;
  border: none;
  color: #2a4a2a;
}
.ayu .content hr::before {
  content: "── ◆ ──";
  color: #2a4a2a;
}

/* ── Light: Parchment ──────────────────────────────────────────────── */
/* Earthy light mode — cream background, warm brown headings.
 * Like reading a hand-bound book in a treehouse on a summer day. */

.light {
  --bg: #f5f0e8;
  --fg: #2a2520;
  --sidebar-bg: #ebe5d8;
  --sidebar-fg: #4a4238;
  --sidebar-non-existant: #9a9080;
  --sidebar-active: #6a4a2a;
  --sidebar-spacer: #ddd5c5;
  --links: #4a6a3a;
  --inline-code-color: #5a4020;
  --theme-popup-bg: #efe8dc;
  --theme-popup-border: #c8c0b0;
  --theme-hover: #e8e0d0;
  --quote-bg: #ede5d5;
  --quote-border: #c8b898;
  --table-border-color: #d8d0c0;
  --table-header-bg: #e0d8c8;
  --table-alternate-bg: rgba(0, 0, 0, 0.02);
  --searchbar-border-color: #b8b0a0;
  --searchbar-bg: #f5f0e8;
  --searchbar-fg: #2a2520;
  --searchresults-header-fg: #6a4a2a;
  --searchresults-border-color: #c8c0b0;
  --color-scheme: light;

  /* Semantic overrides */
  --color-surface: #f5f0e8;
  --color-surface-elevated: #ede5d5;
  --color-text: #2a2520;
  --color-text-muted: #6a6258;
  --color-heading-primary: #6a4a2a;    /* warm brown */
  --color-heading-secondary: #3a6a2a;  /* forest green on cream */
  --color-link: #4a6a3a;
  --color-link-hover: #6a4a2a;
  --color-gold: #8a6a3a;              /* darker gold for light bg */
  --color-border: #d8d0c0;
  --color-border-accent: #c8b898;
  --color-code-bg: #ede5d5;
  --color-code-text: #5a4020;
  --color-sidebar-bg: #ebe5d8;
  --color-sidebar-text: #4a4238;
  --color-sidebar-active: #6a4a2a;
}

/* ── Rust: Clean Modern ────────────────────────────────────────────── */
/* Minimal, readable, with one accent color. System-font clean.
 * The Dwarf Fortress wiki meets modern documentation sites. */

.rust {
  --bg: #fafafa;
  --fg: #1a1a1a;
  --sidebar-bg: #f0f0f0;
  --sidebar-fg: #333333;
  --sidebar-non-existant: #999999;
  --sidebar-active: #2a7a4a;
  --sidebar-spacer: #e0e0e0;
  --links: #2a7a4a;
  --inline-code-color: #444444;
  --theme-popup-bg: #f5f5f5;
  --theme-popup-border: #cccccc;
  --theme-hover: #ebebeb;
  --quote-bg: #f0f5f0;
  --quote-border: #c0d8c0;
  --table-border-color: #e0e0e0;
  --table-header-bg: #f0f0f0;
  --table-alternate-bg: rgba(0, 0, 0, 0.02);
  --searchbar-border-color: #cccccc;
  --searchbar-bg: #ffffff;
  --searchbar-fg: #1a1a1a;
  --searchresults-header-fg: #2a7a4a;
  --searchresults-border-color: #cccccc;
  --color-scheme: light;

  /* Semantic overrides */
  --color-surface: #fafafa;
  --color-surface-elevated: #f0f0f0;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-heading-primary: #1a1a1a;    /* black headings — minimal */
  --color-heading-secondary: #2a7a4a;  /* single green accent */
  --color-link: #2a7a4a;
  --color-link-hover: #1a5a3a;
  --color-gold: #2a7a4a;              /* green replaces gold — one accent only */
  --color-border: #e0e0e0;
  --color-border-accent: #d0d0d0;
  --color-code-bg: #f5f5f5;
  --color-code-text: #333333;
  --color-sidebar-bg: #f0f0f0;
  --color-sidebar-text: #333333;
  --color-sidebar-active: #2a7a4a;

  /* Clean Modern: system fonts, no serif */
  --font-heading: var(--font-body);
}

/* Clean Modern: override heading font to body sans-serif */
.rust .content h1,
.rust .content h2,
.rust .content h3,
.rust .content h4,
.rust .content h5 {
  font-family: var(--font-body);
}

/* Clean Modern: simpler HR */
.rust .content hr {
  background: var(--color-border);
}

/* ── Body & Content ────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

.content main {
  max-width: var(--content-max-width);
  padding: var(--content-padding);
}

/* ── Heading Rubrication ───────────────────────────────────────────── */
/* H1: gold (page titles) — Cormorant Bold
 * H2: soft green (section headings) — Cormorant SemiBold
 * H3-H5: body text color — Cormorant Regular
 * Cinzel reserved for landing page hero only */

.content h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading-primary);
  line-height: var(--line-height-heading);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.content h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading-secondary);
  line-height: var(--line-height-heading);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.content h3, .content h4, .content h5 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--line-height-heading);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

/* ── Links ─────────────────────────────────────────────────────────── */

.content a:hover {
  color: var(--color-link-hover);
}

/* External link indicator */
.content a[href^="http"]::after {
  content: " ↗";
  font-size: 0.75em;
  opacity: 0.6;
}

/* Don't add indicator to image links or reference links */
.content a[href^="http"] img + ::after,
.content .header a::after {
  content: none;
}

/* ── Tables ────────────────────────────────────────────────────────── */

.content table {
  font-size: 0.9em;
  border-collapse: collapse;
  width: 100%;
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.content table th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading-secondary);
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 2px solid var(--color-border-accent);
}

.content table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.content table tr:nth-child(even) {
  background: var(--table-alternate-bg);
}

/* ── Code Blocks ───────────────────────────────────────────────────── */

.content code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--color-code-bg);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}

.content pre code {
  padding: var(--spacing-md);
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* ── Blockquotes ───────────────────────────────────────────────────── */

.content blockquote {
  border-left: 3px solid var(--color-gold);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Horizontal Rules (ornamental divider) ─────────────────────────── */

.content hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border-accent) 20%,
    var(--color-gold) 50%,
    var(--color-border-accent) 80%,
    transparent
  );
  margin: var(--spacing-xl) 0;
}

/* ── Sidebar Enhancements ──────────────────────────────────────────── */

/* Section headers (top-level nav items) get distinct treatment */
.sidebar .sidebar-scrollbox > ol > li > a,
.sidebar .sidebar-scrollbox > ol > li > div > a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Active page highlight */
.sidebar .sidebar-scrollbox a.active {
  color: var(--color-sidebar-active);
}

/* Section separators */
.sidebar .sidebar-scrollbox > ol > li {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
}

/* ── Source Reference Styling ──────────────────────────────────────── */
/* Style the *(Source: ...)* annotations at a smaller size */

.content em:last-child {
  display: block;
  font-size: 0.8em;
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .content main {
    padding: var(--spacing-md);
  }

  .content h1 {
    font-size: 1.6em;
    margin-top: var(--spacing-lg);
  }

  .content h2 {
    font-size: 1.3em;
  }

  .content table {
    font-size: 0.8em;
  }

  .content table th, .content table td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}