/* ====================================================================
   mosaic-materials docs — design system
   Calm, flat, generous whitespace, hairline rules, thin type.
   One accent (teal); a rare warm counterpoint (burnt clay); a quiet
   tint for surfaces only. No shadows, no gradients, no ornament.
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* --------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------- */
:root {
  --bg:          #ffffff;
  --paper:       #fbfcfc;
  --ink:         #1d2321;
  --ink-soft:    #46514d;
  --muted:       #7d8783;
  --line:        #e5eae8;
  --line-strong: #d2d9d7;
  --accent:      #00A6AF;
  --accent-ink:  #00838B;   /* AA on white for link text            */
  --tint:        #eefafa;   /* softened #D9FFFF; surfaces only      */
  --tint-loud:   #D9FFFF;   /* selection only                       */
  --accent-warm: #C97B4A;   /* burnt clay; warnings only            */

  --font-text: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
}

[data-md-color-scheme="slate"] {
  --bg:          #131a19;
  --paper:       #191f1e;
  --ink:         #e6eae8;
  --ink-soft:    #b8c1bd;
  --muted:       #8f9a96;
  --line:        #263230;
  --line-strong: #33413e;
  --accent:      #33bcc4;
  --accent-ink:  #33bcc4;
  --tint:        #0f2e30;
  --tint-loud:   #14494d;
  --accent-warm: #d69a6e;
}

/* --------------------------------------------------------------------
   2. Map tokens onto Material's variables (both schemes)
   -------------------------------------------------------------------- */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        var(--bg);
  --md-default-fg-color:        var(--ink);
  --md-default-fg-color--light: var(--ink-soft);
  --md-default-fg-color--lighter: var(--muted);
  --md-default-fg-color--lightest: var(--line);

  /* header takes the page colour; its text is ink */
  --md-primary-fg-color:        var(--bg);
  --md-primary-fg-color--dark:  var(--bg);
  --md-primary-bg-color:        var(--ink);
  --md-primary-bg-color--light: var(--muted);

  --md-accent-fg-color:         var(--accent);
  --md-accent-bg-color:         var(--bg);
  --md-typeset-a-color:         var(--accent-ink);

  --md-code-bg-color:           var(--tint);
  --md-code-fg-color:           var(--ink-soft);

  --md-typeset-mark-color:      var(--tint-loud);
  --md-footer-bg-color:         transparent;
  --md-footer-bg-color--dark:   transparent;
  --md-footer-fg-color:         var(--muted);
  --md-footer-fg-color--light:  var(--muted);
  --md-footer-fg-color--lighter: var(--muted);

  --md-typeset-table-color:     var(--line);
  --md-shadow-z1: none;
  --md-shadow-z2: none;
  --md-shadow-z3: none;
}

/* --------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------- */
body,
.md-typeset {
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset {
  font-size: 16.5px;
  font-weight: 350;
  line-height: 1.75;
  color: var(--ink);
  text-align: left;          /* ragged right — never justify */
  hyphens: none;
}

.md-typeset h1 {
  font-weight: 200;
  font-size: 2.6rem;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 1.6rem;
}

.md-typeset h2 {
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: 2.2rem;
  margin-top: 2.6rem;
}

.md-typeset h3 {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}

.md-typeset h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.md-typeset strong { font-weight: 600; }

/* content measure: margins over dividers */
.md-content__inner {
  max-width: 47rem;   /* ~72ch at the body size */
}

::selection { background: var(--tint-loud); }

/* --------------------------------------------------------------------
   4. Links — hairline underlines
   -------------------------------------------------------------------- */
.md-typeset a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 45%,
                                   transparent);
  text-underline-offset: 0.22em;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
.md-typeset a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   5. Header — flat, hairline-separated, lowercase title
   -------------------------------------------------------------------- */
.md-header {
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
.md-header--shadow { box-shadow: none !important; }
.md-header__title,
.md-header__topic {
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: lowercase;
  letter-spacing: 0.14em;
}
.md-tabs {
  background: var(--bg);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------
   6. Navigation — micro-type section labels
   -------------------------------------------------------------------- */
.md-nav { font-family: var(--font-text); }

.md-nav__title,
.md-nav--primary .md-nav__item--section > .md-nav__link {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.md-nav__link {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.md-nav__link:hover { color: var(--accent-ink); }
.md-nav__link--active,
.md-nav__link--active > * {
  font-weight: 600;
  color: var(--ink) !important;
}

.md-sidebar__scrollwrap { scrollbar-width: thin; }

/* --------------------------------------------------------------------
   7. Code — tinted, hairlined, mono
   -------------------------------------------------------------------- */
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--font-code);
  font-weight: 400;
  font-size: 0.82em;
}

.md-typeset code {
  background: var(--tint);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.md-typeset pre > code {
  padding: 0.9em 1.1em;
  line-height: 1.65;
}

.md-typeset .highlight,
.md-typeset pre {
  background: transparent;
}
.md-typeset .highlight > pre > code,
.md-typeset > pre > code {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.md-clipboard { color: var(--muted); }
.md-clipboard:hover { color: var(--accent-ink); }

/* --------------------------------------------------------------------
   8. Tables — open design, no box
   -------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.md-typeset table:not([class]) tbody tr:hover {
  background: var(--tint);
  box-shadow: none;
}

/* --------------------------------------------------------------------
   9. Admonitions — flat paper, 2px accent left rule
   -------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.74rem;
  color: var(--ink-soft);
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent !important;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--accent);
}

/* the rare warm counterpoint: warnings and dangers only */
.md-typeset .admonition:is(.warning, .caution, .attention, .danger,
                           .error, .failure, .bug),
.md-typeset details:is(.warning, .caution, .attention, .danger,
                       .error, .failure, .bug) {
  border-left-color: var(--accent-warm);
}
.md-typeset .admonition:is(.warning, .caution, .attention, .danger,
                           .error, .failure, .bug)
  > .admonition-title::before {
  background-color: var(--accent-warm);
}

/* --------------------------------------------------------------------
   10. Cards — hairline-divided grid
   -------------------------------------------------------------------- */
.md-typeset .grid.cards > :is(ul, ol) {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0;
  margin: 1.5em 0;
}
.md-typeset .grid.cards > :is(ul, ol) > li {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
  padding: 1.1rem 1.2rem;
  font-size: 0.74rem;
  color: var(--muted);
  transition: background .15s ease;
}
.md-typeset .grid.cards > :is(ul, ol) > li:hover {
  background: var(--tint);
  border: 0;
  box-shadow: none;
}
.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child,
.md-typeset .grid.cards > :is(ul, ol) > li strong {
  font-weight: 500;
  color: var(--ink);
}

/* --------------------------------------------------------------------
   11. Search — flat paper field
   -------------------------------------------------------------------- */
.md-search__form {
  background: var(--paper) !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: none !important;
}
.md-search__input { color: var(--ink); }
.md-search__input::placeholder { color: var(--muted); }
.md-search__output {
  box-shadow: none;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 4px 4px;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--paper) !important;
  border-color: var(--line-strong);
}

/* --------------------------------------------------------------------
   12. Footer — transparent, hairline rule
   -------------------------------------------------------------------- */
.md-footer,
.md-footer-meta {
  background: transparent;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.md-footer__inner { color: var(--muted); }
.md-footer__title, .md-footer__direction { color: var(--muted); }

/* --------------------------------------------------------------------
   13. Flatness sweep — no shadows or glows anywhere
   -------------------------------------------------------------------- */
.md-typeset .md-button,
.md-top,
.md-dialog,
.md-tooltip,
.md-sidebar,
.md-content { box-shadow: none !important; }

.md-top {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

hr { border: 0; border-top: 1px solid var(--line); }

/* blockquotes as hairline-ruled asides */
.md-typeset blockquote {
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}