/*
 * Claude Theme — Zensical / Material for MkDocs
 * Built directly against the embedded palette + main source CSS.
 *
 * extra_css = ["stylesheets/claude-theme.css"]
 */

/* ── Typography — bump base font size up from Material's 125% (20px) ── */
html {
  font-size: 137.5%;
  /* 22px base, matches Material's ≥100em breakpoint */
}

.md-typeset {
  font-size: .8rem;
  /* up from .75rem — body copy ~17.6px */
}

/* ════════════════════════════════════════════════════════════════════
   SHARED: override the CSS variables Material actually reads
   Source uses --md-hue to derive all slate colors via hsla(),
   so we override the computed vars directly.
   ════════════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE ─────────────────────────────────────────────────────
   Source baseline (main.css :root / [data-md-color-scheme=default]):
     --md-default-bg-color: #fff
     --md-code-bg-color: #f5f5f5
     --md-typeset-a-color: var(--md-primary-fg-color)  ← link color
     --md-default-fg-color--lightest: #0000000d        ← search btn bg, nav hover bg
     --md-default-fg-color--lighter:  #00000052        ← nav hover text
     --md-default-fg-color--light:    #0000008c
     --md-default-fg-color:           #000000de
   ─────────────────────────────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #c95f38;
  --md-primary-fg-color--light: #e07250;
  --md-primary-fg-color--dark: #a04828;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: #e07250;
  --md-accent-fg-color--transparent: rgba(224, 114, 80, 0.12);
  --md-accent-bg-color: #fff;

  --md-default-bg-color: #f7f3ee;
  --md-default-bg-color--light: rgba(247, 243, 238, 0.7);
  --md-default-bg-color--lighter: rgba(247, 243, 238, 0.3);
  --md-default-bg-color--lightest: rgba(247, 243, 238, 0.12);

  --md-default-fg-color: #1a1612;
  --md-default-fg-color--light: rgba(26, 22, 18, 0.55);
  /* --lightest is used for search btn bg AND nav hover bg */
  --md-default-fg-color--lightest: rgba(201, 95, 56, 0.1);
  /* --lighter is used for nav hover text color */
  --md-default-fg-color--lighter: #7a3a1e;

  --md-typeset-a-color: #c95f38;
  --md-code-bg-color: #ede7df;
  --md-code-fg-color: #2e2318;
}

/* Header — deep terracotta, light text */
[data-md-color-scheme="default"] .md-header {
  background-color: #a03d20;
}

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-ellipsis {
  color: #f7f3ee;
}

/* Links: source sets color via --md-typeset-a-color, hover via --md-accent-fg-color */
[data-md-color-scheme="default"] .md-typeset a {
  color: var(--md-typeset-a-color);
}

[data-md-color-scheme="default"] .md-typeset a:focus,
[data-md-color-scheme="default"] .md-typeset a:hover {
  color: #7a3a1e;
}

/* Inline code: source uses background-color: var(--md-code-bg-color) */
[data-md-color-scheme="default"] .md-typeset code {
  background-color: var(--md-code-bg-color);
  color: #c95f38;
}

/* Active nav: source sets color via --md-typeset-a-color */
[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
  color: #c95f38;
}

/* Blockquote */
[data-md-color-scheme="default"] .md-typeset blockquote {
  border-left-color: #c95f38;
  background-color: rgba(201, 95, 56, 0.06);
}

/* H1/H2 underline accent */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  border-bottom: 1px solid rgba(201, 95, 56, 0.2);
  padding-bottom: 0.3em;
}

/* Table header */
[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background-color: rgba(201, 95, 56, 0.1);
}

/* Search result highlight */
[data-md-color-scheme="default"] .md-search-result mark {
  color: #c95f38;
  background-color: rgba(201, 95, 56, 0.15);
}

/* Search button — subtle light on dark header */
[data-md-color-scheme="default"] .md-search__button {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #f7f3ee !important;
}

[data-md-color-scheme="default"] .md-search__button:focus,
[data-md-color-scheme="default"] .md-search__button:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #f7f3ee !important;
}

[data-md-color-scheme="default"] .md-search__button:before {
  background-color: #f7f3ee !important;
}

[data-md-color-scheme="default"] .md-search__button:after {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #f7f3ee !important;
}

/* Footer */
[data-md-color-scheme="default"] .md-footer {
  background-color: #2e2318;
  color: #c95f38;
}

[data-md-color-scheme="default"] .md-footer-meta {
  background-color: #1a1612;
  color: #c95f38;
}

[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright *,
[data-md-color-scheme="default"] .md-footer__title,
[data-md-color-scheme="default"] .md-footer__direction,
[data-md-color-scheme="default"] .md-footer-meta__inner {
  color: #c95f38;
}

[data-md-color-scheme="default"] .md-footer a,
[data-md-color-scheme="default"] .md-footer-meta a,
[data-md-color-scheme="default"] .md-copyright a {
  color: #c95f38 !important;
}

[data-md-color-scheme="default"] .md-footer a:hover,
[data-md-color-scheme="default"] .md-footer-meta a:hover,
[data-md-color-scheme="default"] .md-copyright a:hover {
  color: #e07250;
}


/* ── DARK MODE ──────────────────────────────────────────────────────
   Source (palette.css slate):
     all colors derived from --md-hue via hsla()
     --md-code-bg-color: hsla(var(--md-hue),20%,10%,1)  ← search btn bg too
     --md-typeset-a-color: var(--md-primary-fg-color)
     --md-default-fg-color--lightest: hsla(hue,15%,90%,0.12) ← nav hover bg
     --md-default-fg-color: hsla(hue,15%,90%,0.82)           ← nav hover text
   ─────────────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-hue: 25deg;
  /* warm orange hue base */

  --md-primary-fg-color: #e8693e;
  --md-primary-fg-color--light: #f07d52;
  --md-primary-fg-color--dark: #c04f28;
  --md-primary-bg-color: #f7f2e8;
  --md-primary-bg-color--light: rgba(247, 242, 232, 0.7);

  --md-accent-fg-color: #f07d52;
  --md-accent-fg-color--transparent: rgba(240, 125, 82, 0.12);
  --md-accent-bg-color: #f7f2e8;

  --md-default-bg-color: hsla(25deg, 18%, 7%, 1);
  --md-default-bg-color--light: hsla(25deg, 18%, 7%, 0.54);
  --md-default-bg-color--lighter: hsla(25deg, 18%, 7%, 0.26);
  --md-default-bg-color--lightest: hsla(25deg, 18%, 7%, 0.07);

  --md-default-fg-color: hsla(25deg, 15%, 90%, 0.82);
  --md-default-fg-color--light: hsla(25deg, 15%, 90%, 0.56);
  /* --lightest → nav hover bg */
  --md-default-fg-color--lightest: rgba(232, 105, 62, 0.1);
  /* --lighter → nav hover text (source: color: var(--md-default-fg-color)) 
     but nav hover text actually uses --md-default-fg-color so we set that warm */

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

  /* code bg — source: var(--md-code-bg-color); also used for search btn */
  --md-code-bg-color: hsla(25deg, 20%, 7%, 1);
  --md-code-fg-color: hsla(25deg, 20%, 82%, 1);
}

/* Header */
[data-md-color-scheme="slate"] .md-header {
  background-color: #3d1a08;
  border-bottom: 1px solid rgba(232, 105, 62, 0.4);
}

/* Links — direct element override to beat palette.css scheme+primary combos */
[data-md-color-scheme="slate"] .md-typeset a {
  color: #f07d52;
}

[data-md-color-scheme="slate"] .md-typeset a:focus,
[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: #c95f38;
}

/* Inline code */
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: var(--md-code-bg-color);
  color: #f07d52;
}

/* Nav text — brighter white */
[data-md-color-scheme="slate"] .md-nav__link {
  color: #f7f2e8;
}

/* Active nav */
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #f07d52;
}

/* Site title in sidebar (the "Home" / site name link at top) */
[data-md-color-scheme="slate"] .md-nav__title {
  color: #f7f2e8;
  font-size: .85rem;
  font-weight: 700;
}

/* Section headings in nav */
[data-md-color-scheme="slate"] .md-nav__item--section>.md-nav__link {
  color: #f7f2e8;
  font-weight: 700;
}

/* Blockquote */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left-color: #e8693e;
  background-color: rgba(232, 105, 62, 0.07);
}

/* H1/H2 underline */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom: 1px solid rgba(232, 105, 62, 0.2);
  padding-bottom: 0.3em;
}

/* Table header */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(232, 105, 62, 0.12);
}

/* Search result highlight */
[data-md-color-scheme="slate"] .md-search-result mark {
  color: #f07d52;
  background-color: rgba(232, 105, 62, 0.18);
}

/* Selection */
[data-md-color-scheme="slate"] ::selection {
  background-color: rgba(232, 105, 62, 0.3);
}

[data-md-color-scheme="default"] ::selection {
  background-color: rgba(201, 95, 56, 0.25);
}