/* ============================================================
 * impeccable.css — editorial/archival treatment for mkdocs-material
 * Brief: quiet, archival, opinionated. Research-library, not SaaS docs.
 * Fonts: Fraunces (display) + Inter Tight (body) + JetBrains Mono (code)
 * Brand hue: oxide red — oklch(45% 0.13 30)
 * ============================================================ */

:root {
  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Fluid display scale (clamp for headings on content pages) */
  --text-h1: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --text-h3: 1.25rem;

  /* OKLCH palette — brand hue 30 (oxide red) */
  --brand: oklch(45% 0.13 30);
  --brand-weak: oklch(55% 0.10 30);
  --brand-tint: oklch(97% 0.012 30);

  /* Tinted neutrals — chroma 0.008 toward brand */
  --ink: oklch(22% 0.012 30);          /* body text */
  --ink-soft: oklch(40% 0.010 30);     /* secondary text */
  --ink-mute: oklch(58% 0.008 30);     /* tertiary / metadata */
  --rule: oklch(90% 0.006 30);         /* hairlines */
  --paper: oklch(98.5% 0.005 30);      /* page background */
  --surface: oklch(100% 0 0);          /* content surface (basically white) */

  /* Spacing (4pt scale, semantic names) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Material brand-color overrides (light) */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--brand);
  --md-primary-fg-color--light: var(--brand-weak);
  --md-primary-fg-color--dark: oklch(35% 0.13 30);
  --md-accent-fg-color: var(--brand);
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-soft);
  --md-default-fg-color--lighter: var(--ink-mute);
  --md-default-fg-color--lightest: var(--rule);
  --md-typeset-a-color: var(--brand);
  --md-code-bg-color: oklch(96% 0.006 30);
  --md-code-fg-color: oklch(28% 0.020 30);
}

/* Dark theme — desaturated brand, lighter surfaces for depth */
[data-md-color-scheme="slate"] {
  --brand: oklch(72% 0.12 30);
  --brand-weak: oklch(62% 0.10 30);
  --ink: oklch(90% 0.010 30);
  --ink-soft: oklch(72% 0.008 30);
  --ink-mute: oklch(55% 0.006 30);
  --rule: oklch(30% 0.006 30);
  --paper: oklch(16% 0.008 30);
  --surface: oklch(20% 0.008 30);

  --md-primary-fg-color: var(--paper);
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-soft);
  --md-default-fg-color--lighter: var(--ink-mute);
  --md-typeset-a-color: var(--brand);
  --md-code-bg-color: oklch(22% 0.010 30);
  --md-code-fg-color: oklch(82% 0.015 30);
}

/* ------------- Typography ------------- */

body, .md-typeset {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11", "kern";
  font-weight: 400;
}

.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.md-typeset h1 {
  font-size: var(--text-h1);
  font-weight: 400;
  margin: var(--space-xl) 0 var(--space-md);
  letter-spacing: -0.02em;
}
.md-typeset h2 {
  font-size: var(--text-h2);
  margin-top: var(--space-xl);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-sm);
}
.md-typeset h3 {
  font-size: var(--text-h3);
  margin-top: var(--space-lg);
}

.md-typeset {
  font-size: 1rem;
  line-height: 1.65;
}
[data-md-color-scheme="slate"] .md-typeset { line-height: 1.72; /* +0.07 for light-on-dark */ }

/* Cap body text line length */
.md-typeset p, .md-typeset li, .md-typeset blockquote {
  max-width: 72ch;
}
.md-typeset table:not([class]) { max-width: 100%; }

/* Links: underline with brand-colored decoration, no garish highlight */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--brand) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms var(--ease-out-quart);
}
.md-typeset a:hover {
  text-decoration-color: var(--brand);
}

/* Code — tabular, tinted neutral */
.md-typeset code, .md-typeset pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.md-typeset code { padding: 0.1em 0.35em; border-radius: 3px; }

/* ------------- Header ------------- */

.md-header {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.md-header[data-md-state="shadow"] { box-shadow: 0 1px 0 var(--rule); }

.md-header__title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
.md-header__button svg { fill: var(--ink-soft); }

/* Top nav tabs */
.md-tabs {
  background: var(--paper);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.md-tabs__link {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 1;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.md-tabs__link:hover,
.md-tabs__link--active { color: var(--brand); }

/* ------------- Sidebar nav ------------- */

.md-nav__title { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.md-nav__link { font-size: 0.85rem; color: var(--ink-soft); }
.md-nav__link:hover { color: var(--brand); }
.md-nav__link--active { color: var(--brand); font-weight: 500; }

/* ------------- Search ------------- */

.md-search__form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.md-search__input { font-family: var(--font-body); }

/* ------------- Admonitions — no left stripe (BAN 1) ------------- */

.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--rule);
  border-left-width: 1px;                /* kill the 4px stripe */
  border-radius: 2px;
  box-shadow: none;
  background: var(--surface);
}
.md-typeset .admonition-title, .md-typeset summary {
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}

/* ------------- Footer ------------- */

.md-footer { background: var(--paper); color: var(--ink-soft); border-top: 1px solid var(--rule); }
.md-footer-meta { background: var(--paper); color: var(--ink-mute); }
.md-footer-meta a { color: var(--ink-soft); }

.sd-freshness {
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
}
.sd-freshness time { font-feature-settings: "tnum"; }

/* ------------- Reduced motion ------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------- Hide primary left sidebar site-wide -------------
 * Rationale: with 1,320+ pages and a 5-item flat top-nav, the primary
 * sidebar only ever repeats the top tabs. Material renders a near-empty
 * left rail that competes with content. The right TOC is preserved
 * and carries all in-page navigation. Home already hides both via
 * frontmatter. */

.md-sidebar--primary { display: none; }

/* Unify grid width: header, tabs, and content all share the same max-width
 * so their left/right edges line up. Material's default is 61rem. */
.md-grid { max-width: 64rem; }
.md-content { max-width: 100%; }

/* On small screens Material shows the primary nav as a drawer via the
 * hamburger — keep that working so mobile still has an escape hatch. */
@media screen and (max-width: 76.1875em) {
  .md-sidebar--primary { display: block; }
}

/* ------------- Source page metadata strip ------------- */

.sd-source-header {
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--rule);
}
.sd-source-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sd-source-company { color: var(--brand); font-weight: 600; }
.sd-source-date { font-family: var(--font-mono); font-feature-settings: "tnum"; text-transform: none; letter-spacing: 0.02em; }
.sd-source-url { margin: 0; font-size: 0.85rem; }
.sd-source-url a { color: var(--ink-soft); text-decoration: none; }
.sd-source-url a:hover { color: var(--brand); }

/* Eyebrow for concept/pattern/system pages — typography-only framing */
.sd-eyebrow {
  display: flex;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sd-eyebrow__type { color: var(--brand); font-weight: 600; }
.sd-eyebrow__cite { color: var(--ink-mute); }