/* ============================================================
   Inkscriptio Design System — MkDocs Material overrides
   Palette: ink-* (deep navy) + stone-* (warm neutrals)
   Fonts: Lora (headings) + DM Sans (body, loaded via mkdocs.yml)
   ============================================================ */

/* -- Google Fonts: Lora for display headings ----------------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&display=swap');

/* -- MkDocs Material: light mode ----------------------------- */
[data-md-color-scheme="default"] {
  /* Header (ink-900 navbar) */
  --md-primary-fg-color:        #141d2b;
  --md-primary-fg-color--light: #1e2d40;
  --md-primary-fg-color--dark:  #0b1018;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #d9e2ec;

  /* Accent — ink-600 for links, highlights, active states */
  --md-accent-fg-color:              #385573;
  --md-accent-fg-color--transparent: rgba(56, 85, 115, 0.1);
  --md-accent-bg-color:              #ffffff;

  /* Page surfaces — stone warmth */
  --md-default-bg-color:          #fafaf9;
  --md-default-bg-color--light:   #f5f5f4;
  --md-default-bg-color--lighter: #f0efee;
  --md-default-bg-color--lightest:#ebebea;

  /* Text hierarchy — stone palette */
  --md-default-fg-color:          #1c1917;
  --md-default-fg-color--light:   #44403c;
  --md-default-fg-color--lighter: #78716c;
  --md-default-fg-color--lightest:#a8a29e;

  /* Links */
  --md-typeset-a-color: #385573;

  /* Code blocks — slight warm tint */
  --md-code-bg-color:  #f5f5f4;
  --md-code-fg-color:  #1c1917;
}

/* -- MkDocs Material: dark mode ------------------------------ */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #141d2b;
  --md-primary-fg-color--light: #1e2d40;
  --md-primary-fg-color--dark:  #0b1018;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #8da8c2;

  --md-accent-fg-color:              #8da8c2;
  --md-accent-fg-color--transparent: rgba(141, 168, 194, 0.1);

  --md-default-bg-color:          #1a1a18;
  --md-default-bg-color--light:   #242420;
  --md-default-bg-color--lighter: #2e2e2a;
  --md-default-bg-color--lightest:#383834;

  --md-default-fg-color:          #e7e5e4;
  --md-default-fg-color--light:   #a8a29e;
  --md-default-fg-color--lighter: #78716c;
  --md-default-fg-color--lightest:#57534e;

  --md-typeset-a-color: #8da8c2;
  --md-code-bg-color:   #242420;
  --md-code-fg-color:   #e7e5e4;
}

/* -- Header & navigation tabs -------------------------------- */
.md-header {
  background-color: #141d2b;
  box-shadow: 0 1px 0 0 #1e2d40;
}

.md-tabs {
  background-color: #141d2b;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.md-tabs__link {
  color: #8da8c2;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: 1;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  color: #ffffff;
}

.md-tabs__link--active {
  border-bottom: 2px solid #4a6e91;
}

/* -- Header search ------------------------------------------- */
.md-search__input {
  background-color: rgba(255,255,255,0.08);
  color: #ffffff;
  border-radius: .375rem;
}

.md-search__input::placeholder {
  color: #8da8c2;
}

/* Search overlay (open state) — dark background so white text stays readable */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #1e2d40;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  color: #ffffff;
}

/* Search result list — ensure readable text */
.md-search-result__link {
  color: #1c1917;
}

[data-md-color-scheme="slate"] .md-search-result__link {
  color: #e7e5e4;
}

/* -- Typography: Lora for headings --------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1c1917;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #e7e5e4;
}

.md-typeset h1 {
  font-size: 1.875rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.md-typeset h2 {
  font-size: 1.375rem;
  border-bottom: 1px solid #e7e5e4;
  padding-bottom: .4rem;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: #2e2e2a;
}

.md-typeset h3 {
  font-size: 1.1rem;
}

/* -- Links --------------------------------------------------- */
.md-typeset a {
  color: #385573;
  text-decoration: none;
  font-weight: 500;
}

.md-typeset a:hover {
  color: #2b4059;
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-md-color-scheme="slate"] .md-typeset a {
  color: #8da8c2;
}

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

/* -- Sidebar navigation -------------------------------------- */
.md-nav__title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #78716c;
  text-transform: uppercase;
}

.md-nav__link {
  font-size: .85rem;
  font-weight: 400;
  color: #44403c;
  border-radius: .375rem;
  padding: .25rem .5rem;
  transition: background-color .15s, color .15s;
}

.md-nav__link:hover {
  background-color: #f0f3f7;
  color: #141d2b;
}

.md-nav__link--active {
  font-weight: 600;
  color: #141d2b;
  background-color: #e8edf3;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: #a8a29e;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background-color: #2e2e2a;
  color: #e7e5e4;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #d9e2ec;
  background-color: #1e2d40;
}

/* -- Code: inline -------------------------------------------- */
.md-typeset code {
  background-color: #f5f5f4;
  color: #385573;
  border: 1px solid #e7e5e4;
  border-radius: .25rem;
  padding: .1em .35em;
  font-size: .875em;
}

.md-typeset pre code {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
}

/* -- Code: blocks -------------------------------------------- */
.highlight {
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid #e7e5e4;
}

[data-md-color-scheme="slate"] .highlight {
  border-color: #2e2e2a;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #242420;
  color: #8da8c2;
  border-color: #2e2e2a;
}

/* -- Admonitions (alerts) ------------------------------------ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: .5rem;
  border-left-width: 4px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / .06);
}

/* Tip → ink color */
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #385573;
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: #f0f3f7;
  color: #2b4059;
}

/* -- Footer -------------------------------------------------- */
.md-footer {
  background-color: #0b1018;
}

.md-footer-meta {
  background-color: #0b1018;
}

/* -- Back-to-top button -------------------------------------- */
.md-top {
  background-color: #385573;
  color: #ffffff;
  border-radius: .375rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);
}

.md-top:hover {
  background-color: #2b4059;
}