/* ============================================================================
   THE QUANTUM CODEX  ·  theme for The Curious Order of Ink & Flame
   A retro-futurist / antiquarian skin for MkDocs Material (light mode).
   Drop this at:  docs/stylesheets/ink-flame.css
   and reference it from mkdocs.yml  ->  extra_css.
   ============================================================================ */

/* --- Fonts (Material loads Spectral + Courier Prime via theme.font;
       these two display faces are not available there, so import here) --- */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

/* ----------------------------------------------------------------------------
   1 · TOKENS  — the whole palette + type system lives here.
---------------------------------------------------------------------------- */
:root {
  /* Type */
  --if-display: "IM Fell English", "Spectral", Georgia, serif;   /* headings, masthead */
  --if-smallcaps: "IM Fell English SC", "IM Fell English", serif;/* kickers / nav */
  --if-body: "Spectral", Georgia, "Times New Roman", serif;      /* reading */
  --if-mono: "Courier Prime", ui-monospace, "Courier New", monospace; /* labels / code */

  /* Palette · cosmic duotone on dusky parchment */
  --if-paper:   #e7dcc0;   /* page */
  --if-paper-2: #ddd0ae;   /* panels / wells */
  --if-ink:     #1d1826;   /* text (warm violet-black) */
  --if-ink-2:   #4d4360;   /* muted text */
  --if-violet:  #2f2350;   /* primary */
  --if-violet-2:#41306d;   /* primary light */
  --if-flame:   #cf7a1e;   /* accent — flame gold-orange */
  --if-teal:    #1f6a6d;   /* links — oxidized teal */
  --if-gold:    #b08534;   /* hairlines / brass */
}

/* ----------------------------------------------------------------------------
   2 · MAP TOKENS ONTO MATERIAL  (light scheme = "default")
---------------------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color:        var(--if-paper);
  --md-default-fg-color:        #1d1826;
  --md-default-fg-color--light: var(--if-ink-2);
  --md-default-fg-color--lighter:  rgba(29,24,38,.42);
  --md-default-fg-color--lightest: rgba(29,24,38,.08);
  --md-typeset-color:           var(--if-ink);

  --md-primary-fg-color:        var(--if-violet);
  --md-primary-fg-color--light: var(--if-violet-2);
  --md-primary-fg-color--dark:  #241a40;
  --md-primary-bg-color:        var(--if-paper);
  --md-primary-bg-color--light: rgba(231,220,192,.7);

  --md-accent-fg-color:         var(--if-flame);
  --md-typeset-a-color:         var(--if-teal);

  --md-code-fg-color:           var(--if-ink);
  --md-code-bg-color:           rgba(47,35,80,.07);

  --md-footer-bg-color:         var(--if-ink);
  --md-footer-bg-color--dark:   #15111c;

  /* font families (in case theme.font isn't set) */
  --md-text-font:  "Spectral";
  --md-code-font:  "Courier Prime";
}

/* ----------------------------------------------------------------------------
   3 · PAGE CANVAS  — parchment + faint cosmic geometry
---------------------------------------------------------------------------- */
body {
  background:
    radial-gradient(60% 42% at 50% 6%,  rgba(47,35,80,.10), transparent 70%),
    radial-gradient(50% 40% at 84% 70%, rgba(207,122,30,.06), transparent 70%),
    radial-gradient(50% 40% at 12% 82%, rgba(31,106,109,.06), transparent 70%),
    var(--if-paper);
}
/* constellation dot-grid, fixed, fading toward the page bottom */
.md-container::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .38;
  background-image: radial-gradient(rgba(47,35,80,.5) 1px, transparent 1.4px);
  background-size: 42px 42px; background-position: 8px 8px;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0, #000, transparent 72%);
          mask-image: radial-gradient(130% 90% at 50% 0, #000, transparent 72%);
}
.md-main { position: relative; z-index: 1; }
body, .md-typeset { font-family: var(--if-body); }
::selection { background: rgba(207,122,30,.28); }

/* ----------------------------------------------------------------------------
   4 · HEADER + TABS  — parchment masthead with a brass underline
---------------------------------------------------------------------------- */
.md-header {
  background-color: var(--if-paper);
  color: var(--if-ink);
  border-bottom: 1px solid var(--if-gold);
  box-shadow: none;
}
.md-header--shadow { box-shadow: 0 0 .4rem rgba(29,24,38,.12); }
.md-header__title { font-family: var(--if-display); font-size: 1.05rem; letter-spacing: .01em; }
.md-tabs {
  background-color: var(--if-paper);
  color: var(--if-ink-2);
  border-bottom: 1px solid rgba(47,35,80,.22);
}
.md-tabs__link { font-family: var(--if-smallcaps); text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--if-flame); opacity: 1; }
.md-search__input { background-color: rgba(47,35,80,.08); }
.md-search__input::placeholder { color: var(--if-ink-2); }

/* ----------------------------------------------------------------------------
   5 · TYPOGRAPHY  — IM Fell display heads, flame/teal accents
---------------------------------------------------------------------------- */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5 {
  font-family: var(--if-display);
  font-weight: 400;
  color: var(--if-violet);
  letter-spacing: 0;
}
.md-typeset h1 { color: var(--if-ink); font-size: 2.3rem; line-height: 1.1; }
.md-typeset h2 {
  font-size: 1.65rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--if-violet-2), transparent) 1;
}
.md-typeset a:hover { color: var(--if-flame); }

/* (Illuminated drop-cap intentionally omitted: it split abbreviations like
   "J.B." into a giant initial + ".B." and read as a stray glyph. Re-add a
   manual opt-in version later if a true illuminated initial is wanted.) */

/* horizontal rules become brass filaments */
.md-typeset hr {
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--if-gold), transparent) 1;
}

/* ----------------------------------------------------------------------------
   6 · BLOCKQUOTE  — flame margin, IM Fell italic
---------------------------------------------------------------------------- */
.md-typeset blockquote {
  border-left: 3px solid var(--if-flame);
  background: linear-gradient(90deg, rgba(207,122,30,.08), transparent);
  color: var(--if-ink);
  font-family: var(--if-display);
  font-style: italic;
  font-size: 1.05rem;
}

/* ----------------------------------------------------------------------------
   7 · ADMONITIONS  — the violet "transmission / folio" panel
---------------------------------------------------------------------------- */
.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--if-gold);
  border-radius: 0;
  background: var(--if-violet);
  color: #ece4f6;
  box-shadow: none;
  font-size: .74rem;
}
.md-typeset .admonition-title, .md-typeset summary {
  background: rgba(176,133,52,.16);
  border-bottom: 1px solid rgba(176,133,52,.5);
  color: var(--if-gold);
  font-family: var(--if-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 400;
}
.md-typeset .admonition-title::before, .md-typeset summary::before {
  background-color: var(--if-gold);
}
.md-typeset .admonition p { color: #ece4f6; }
.md-typeset .admonition a { color: var(--if-flame); }

/* ----------------------------------------------------------------------------
   8 · TABLES  — Courier headers on violet
---------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid rgba(47,35,80,.28);
  background: rgba(255,252,244,.5);
}
.md-typeset table:not([class]) th {
  background: var(--if-violet);
  color: #efe6ff;
  font-family: var(--if-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .64rem;
  font-weight: 400;
}
.md-typeset table:not([class]) td { border-top: 1px solid rgba(47,35,80,.14); }

/* ----------------------------------------------------------------------------
   9 · CODE  — Courier Prime
---------------------------------------------------------------------------- */
.md-typeset code, .md-typeset pre > code { font-family: var(--if-mono); }
.md-typeset pre > code { background: rgba(29,24,38,.92); color: #e7ddf2; }

/* ----------------------------------------------------------------------------
   10 · LEFT NAV + TOC  — small-caps section titles, flame active state
---------------------------------------------------------------------------- */
.md-nav__title { font-family: var(--if-smallcaps); text-transform: uppercase; letter-spacing: .08em; color: var(--if-ink-2); }
.md-nav__link--active, .md-nav__item--active > .md-nav__link { color: var(--if-flame); }
.md-nav__link:hover { color: var(--if-teal); }
.md-nav__link--active { font-weight: 600; }

/* ----------------------------------------------------------------------------
   11 · FOOTER  — deep ink with flame topline
---------------------------------------------------------------------------- */
.md-footer { background-color: var(--if-ink); border-top: 2px solid var(--if-flame); }
.md-footer-meta { background-color: #15111c; }
.md-footer__inner.md-grid { color: #e7ddf2; }

/* ----------------------------------------------------------------------------
   12 · LETTERED MEDALLIONS  — vintage seals for the Five Spirits.
   Each spirit carries its Narrative DRIVE initial (D·R·I·V·E) instead of an
   emoji: a gold IM Fell letter struck on a violet wax disc.
---------------------------------------------------------------------------- */
.if-medallion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65em; height: 1.65em; border-radius: 50%;
  border: 1px solid var(--if-gold);
  background: var(--if-violet); color: var(--if-gold);
  font-family: var(--if-display); font-style: normal; font-weight: 400;
  font-size: .92em; line-height: 1; vertical-align: -.42em;
  margin-right: .25em;
  box-shadow: inset 0 0 0 2px rgba(176,133,52,.20);
}

/* ----------------------------------------------------------------------------
   13 · DARK MODE  — "candlelit" slate variant. Re-tints the same tokens
   (night parchment, brighter flame, gold heads) and patches the handful of
   rules that hard-use --if-ink / --if-violet so panels & footer stay legible.
---------------------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --if-paper:   #17131f;   /* deep night parchment */
  --if-paper-2: #221b2e;   /* panels / wells */
  --if-ink:     #ece2f5;   /* warm parchment text (light) */
  --if-ink-2:   #b1a6c6;   /* muted */
  --if-violet:  #2f2350;   /* kept deep — drives admonition/table panels */
  --if-violet-2:#5a479a;   /* brighter so the H2 hairline reads on night */
  --if-head:    #e7c98a;   /* candlelit gold — headings */
  --if-flame:   #ec9836;   /* brighter flame */
  --if-teal:    #58b7ba;   /* brighter teal links */
  --if-gold:    #c79a4a;   /* brass */

  --md-default-bg-color:        var(--if-paper);
  --md-default-fg-color:        #ece2f5;
  --md-default-fg-color--light: var(--if-ink-2);
  --md-default-fg-color--lighter:  rgba(236,226,245,.45);
  --md-default-fg-color--lightest: rgba(236,226,245,.10);
  --md-typeset-color:           var(--if-ink);
  --md-primary-fg-color:        var(--if-violet);
  --md-primary-bg-color:        #ece2f5;
  --md-accent-fg-color:         var(--if-flame);
  --md-typeset-a-color:         var(--if-teal);
  --md-code-fg-color:           #ece2f5;
  --md-code-bg-color:           rgba(231,201,138,.10);
  --md-footer-bg-color:         #0f0c16;
  --md-footer-bg-color--dark:   #0a0810;
}
/* headings glow gold in the dark; h1 stays luminous cream */
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5 { color: var(--if-head); }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #f3ead9; }
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-image: linear-gradient(90deg, var(--if-gold), transparent) 1;
}
/* footer hard-uses --if-ink (now light) for its bg — force it dark */
[data-md-color-scheme="slate"] .md-footer { background-color: #0f0c16; }
[data-md-color-scheme="slate"] .md-footer-meta { background-color: #0a0810; }
/* constellation dots: faint warm light instead of dark violet */
[data-md-color-scheme="slate"] .md-container::before {
  background-image: radial-gradient(rgba(231,201,138,.14) 1px, transparent 1.4px);
  opacity: .5;
}
/* tables: dark translucent rows (light mode used a pale wash) */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) { background: rgba(231,201,138,.03); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td { border-top-color: rgba(231,201,138,.12); }
/* medallion letter pops a touch brighter on night */
[data-md-color-scheme="slate"] .if-medallion { color: var(--if-head); border-color: var(--if-head); }
[data-md-color-scheme="slate"] .md-search__input { background-color: rgba(236,226,245,.08); }