/* ============================================================
   UO Unchained Codex — custom theme
   Identity: forged iron & ember. A shard "unchained" — dark
   steel surfaces with a molten-ember accent, and a display
   face (Cinzel) that evokes engraved metal for headings.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');

/* ---- Palette tokens ---------------------------------------- */
:root {
  --uou-ember:       #e0762c;  /* molten ember — primary accent */
  --uou-ember-dim:   #b85c1e;
  --uou-steel-900:   #16181d;  /* forged iron background */
  --uou-steel-800:   #1e2128;
  --uou-steel-700:   #262a33;
  --uou-parchment:   #e8e2d4;  /* light-mode paper */
  --uou-ink:         #2a2620;
}

/* ---- Material color hooks (scheme: slate / dark) ------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--uou-steel-900);
  --md-primary-fg-color--light: var(--uou-steel-700);
  --md-primary-fg-color--dark:  #0f1114;
  --md-accent-fg-color:         var(--uou-ember);
  --md-typeset-a-color:         #f0924a;
  --md-default-bg-color:        var(--uou-steel-800);
  --md-code-bg-color:           var(--uou-steel-900);
}

/* ---- Material color hooks (scheme: default / light) --------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #3a3f4b;
  --md-primary-fg-color--light: #565c6b;
  --md-primary-fg-color--dark:  #23262e;
  --md-accent-fg-color:         var(--uou-ember-dim);
  --md-typeset-a-color:         #a34f14;
  --md-default-bg-color:        var(--uou-parchment);
  --md-default-fg-color:        var(--uou-ink);
}

/* ---- Engraved-metal headings -------------------------------- */
.md-typeset h1,
.md-typeset h2 {
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.md-typeset h1 {
  color: var(--md-accent-fg-color);
}

/* Ember rule under h2 — the "broken chain" divider */
.md-typeset h2 {
  padding-bottom: 0.2em;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--uou-ember) 0 2.5rem,
      transparent 2.5rem 3rem,
      color-mix(in srgb, var(--uou-ember) 35%, transparent) 3rem 100%
    ) 1;
}

/* Site title in header uses the display face too */
.md-header__topic,
.md-header__title {
  font-family: "Cinzel", serif;
  letter-spacing: 0.05em;
}

/* ---- Tables: stat-block styling ------------------------------ */
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color--light);
  color: #fff;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  color: var(--uou-parchment);
}

/* ---- Admonitions: ember left-edge ---------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-left: 3px solid var(--uou-ember);
}

/* ---- Respect reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}