/* Lyonspyre dark-fantasy palette overlay for MkDocs Material. */

:root {
  --md-primary-fg-color:        #6a4720;
  --md-primary-fg-color--light:  #8a6030;
  --md-primary-fg-color--dark:   #3a2818;
  --md-accent-fg-color:          #d4a017;
  --md-accent-fg-color--transparent: rgba(212, 160, 23, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #14101c;
  --md-default-bg-color--light:  #1b1626;
  --md-default-bg-color--lighter: #221c30;
  --md-default-bg-color--lightest: #2a2338;
  --md-default-fg-color:        #e7e1d0;
  --md-default-fg-color--light: rgba(231, 225, 208, 0.75);
  --md-default-fg-color--lighter: rgba(231, 225, 208, 0.45);
  --md-default-fg-color--lightest: rgba(231, 225, 208, 0.12);

  --md-primary-fg-color:        #6a4720;
  --md-primary-bg-color:        #f1e8d2;
  --md-primary-bg-color--light: rgba(241, 232, 210, 0.7);

  --md-accent-fg-color:          #d4a017;
  --md-accent-fg-color--transparent: rgba(212, 160, 23, 0.12);
  --md-accent-bg-color:          #14101c;

  --md-typeset-a-color:         #d4a017;

  --md-code-bg-color:           #1b1626;
  --md-code-fg-color:           #f0e6cf;
  --md-code-hl-keyword-color:   #d4a017;
  --md-code-hl-string-color:    #a3d977;
  --md-code-hl-number-color:    #f0a050;
  --md-code-hl-comment-color:   rgba(231, 225, 208, 0.4);
}

/* Scrollbars (per CLAUDE.md rule: every scrollable region gets a custom bar). */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(20, 16, 28, 0.5);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6a4720 0%, #3a2818 100%);
  border: 1px solid rgba(212, 160, 23, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8a6030 0%, #4a3220 100%);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #6a4720 rgba(20, 16, 28, 0.4);
}

/* Header: gold-on-black, suit-the-theme. */
.md-header {
  background: linear-gradient(180deg, #1b1626 0%, #14101c 100%);
  border-bottom: 1px solid rgba(212, 160, 23, 0.25);
}
.md-header__title, .md-tabs {
  background: transparent;
}
.md-tabs {
  border-bottom: 1px solid rgba(212, 160, 23, 0.15);
}

/* Card-like admonitions for "formula" / "build advice" callouts. */
.md-typeset .admonition,
.md-typeset details {
  border-left: 3px solid var(--md-accent-fg-color);
  background: rgba(20, 16, 28, 0.6);
}

.md-typeset table:not([class]) {
  background: rgba(20, 16, 28, 0.4);
  border: 1px solid rgba(212, 160, 23, 0.18);
}
.md-typeset table:not([class]) th {
  background: linear-gradient(180deg, #2a2338 0%, #1b1626 100%);
  color: #f0e6cf;
  border-bottom: 1px solid rgba(212, 160, 23, 0.3);
}

/* Big landing hero. */
.lyonspyre-hero {
  margin: -1.6rem -1rem 2rem -1rem;
  padding: 4rem 2rem 3rem 2rem;
  background:
    radial-gradient(ellipse at top, rgba(212, 160, 23, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #1b1626 0%, #14101c 100%);
  border-bottom: 1px solid rgba(212, 160, 23, 0.2);
  text-align: center;
}
.lyonspyre-hero h1 {
  font-size: 3.2rem !important;
  font-weight: 700;
  margin: 0 0 0.5rem 0 !important;
  color: #f0e6cf;
  letter-spacing: -0.02em;
}
.lyonspyre-hero p {
  font-size: 1.1rem;
  color: rgba(231, 225, 208, 0.75);
  max-width: 60ch;
  margin: 0 auto;
}

/* Pill-style "rank" badge for talent tables. */
.rank-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 8px;
  background: rgba(212, 160, 23, 0.15);
  border: 1px solid rgba(212, 160, 23, 0.4);
  color: #d4a017;
  font-size: 0.8rem;
  font-weight: 600;
}

/* "Formula" admonition: distinct from notes. */
.md-typeset .admonition.formula,
.md-typeset details.formula {
  border-left-color: #4a90e2;
}
.md-typeset .formula > .admonition-title,
.md-typeset .formula > summary {
  background: rgba(74, 144, 226, 0.12);
}
.md-typeset .formula > .admonition-title::before,
.md-typeset .formula > summary::before {
  background-color: #4a90e2;
  -webkit-mask-image: var(--md-admonition-icon--abstract);
  mask-image: var(--md-admonition-icon--abstract);
}