/* ===========================================================================
   Limnion brand overlay for the siglake docs site.

   Tokens are lifted verbatim from limnion.ai (`src/styles/global.css`) so the
   two properties stay in sync — when the brand palette moves, update the
   `--ll-*` block below and nothing else.

   The marketing site is dark-only and maximalist (blurred blobs, dotted grid,
   gradient buttons, glow shadows). None of that belongs behind long-form
   technical prose, so this overlay keeps the brand in the *chrome* and the
   *code* and leaves the reading column calm. Light mode is derived from the
   same hues, darkened for contrast on near-white.
   =========================================================================== */

:root {
  /* --- Surfaces: cool near-black, layered -------------------------------
     The full ramp is kept even though this overlay consumes only part of it,
     so the block stays diffable against the brand file. */
  --ll-ink-950: #07070d;
  --ll-ink-900: #0b0b14;
  --ll-ink-850: #0f0f1a;
  --ll-ink-800: #131322;
  --ll-ink-700: #1a1a2e;
  --ll-ink-600: #25253f;
  --ll-ink-500: #34344f;

  /* --- Text ------------------------------------------------------------- */
  --ll-fg: #ecedf5;
  --ll-fg-muted: #a0a3b8;
  --ll-fg-dim: #6c6f85;

  /* `fg-dim` measures 4.07:1 on ink-950 and 3.85:1 on the code surface, which
     is under WCAG AA for body text. That is fine on the marketing site, where
     it labels things at larger sizes — but here it lands on code comments,
     which people actually read. This is the same hue and saturation lifted
     until it clears 4.6:1 on both surfaces. The brand value above is kept as
     the token of record. */
  --ll-fg-dim-readable: #797c92;

  /* --- Neon accent triad ------------------------------------------------ */
  --ll-pink: #ff3ea5;
  --ll-purple: #b46aff;
  --ll-teal: #4fdfd0;

  /* Extended hues, taken from the brand site's own syntax tokens
     (`.tok-str`, `.tok-num`) rather than invented. */
  --ll-lilac: #d8b4ff;
  --ll-amber: #ffd56b;

  /* --- Lines ------------------------------------------------------------ */
  --ll-line: rgba(255, 255, 255, 0.08);
  --ll-line-strong: rgba(255, 255, 255, 0.14);

  /* --- The triad gradient, at the brand's angle ------------------------- */
  --ll-triad: linear-gradient(
    100deg,
    var(--ll-pink) 0%,
    var(--ll-purple) 45%,
    var(--ll-teal) 100%
  );
}

/* ===========================================================================
   Typography — Inter with the brand's OpenType features, JetBrains Mono for
   code. Font families come from `theme.font` in mkdocs.yml; `ss01`/`cv11`
   match the marketing site's `html` rule (alternate digits + single-storey a).
   =========================================================================== */

body,
input,
button,
.md-typeset {
  font-feature-settings: "ss01", "cv11";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Eyebrow treatment for the mono "chip" idiom: inline code inside headings
   shouldn't shout, so it sits at the heading's weight rather than the body's. */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code {
  font-size: 0.9em;
  font-weight: 500;
}

/* ===========================================================================
   Dark scheme — the brand-faithful one.
   `:root[...]` outspecifies the theme's own `[data-md-color-scheme=slate]`.
   =========================================================================== */

:root[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--ll-ink-950);
  --md-default-bg-color--light: var(--ll-ink-900);
  --md-default-bg-color--lighter: var(--ll-ink-850);
  --md-default-bg-color--lightest: var(--ll-ink-800);

  --md-default-fg-color: var(--ll-fg);
  --md-default-fg-color--light: var(--ll-fg-muted);
  --md-default-fg-color--lighter: var(--ll-fg-dim-readable);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);

  --md-typeset-color: var(--ll-fg);

  /* Retained for the `classic` theme variant and shared components; the
     `modern` variant colours its header from the default bg/fg pair. */
  --md-primary-fg-color: var(--ll-ink-900);
  --md-primary-fg-color--light: var(--ll-ink-800);
  --md-primary-fg-color--dark: var(--ll-ink-950);
  --md-primary-bg-color: var(--ll-fg);
  --md-primary-bg-color--light: var(--ll-fg-muted);

  /* Teal is the brand's "live" signal (the glowing chip dot), so it carries
     interaction: links, hover, active nav. */
  --md-accent-fg-color: var(--ll-teal);
  --md-accent-fg-color--transparent: rgba(79, 223, 208, 0.1);
  --md-accent-bg-color: var(--ll-ink-950);

  --md-typeset-a-color: var(--ll-teal);
  --md-typeset-mark-color: rgba(180, 106, 255, 0.28);
  --md-typeset-table-color: var(--ll-line-strong);

  --md-code-bg-color: var(--ll-ink-850);
  --md-code-fg-color: var(--ll-fg);

  --ll-surface: var(--ll-ink-850);
  --ll-line-current: var(--ll-line);
  --ll-line-strong-current: var(--ll-line-strong);
}

/* ===========================================================================
   Light scheme — same hues, darkened to hold contrast on near-white.
   Deliberately cool (#fbfbfd), not warm cream: the identity is cool-toned.
   =========================================================================== */

:root[data-md-color-scheme="default"] {
  --ll-pink-ink: #c2186f;
  --ll-purple-ink: #7b34d8;
  --ll-teal-ink: #0e7d72;
  --ll-lilac-ink: #8a52cf;
  --ll-amber-ink: #8a6100;

  --md-default-bg-color: #fbfbfd;
  --md-default-bg-color--light: #f5f5fa;
  --md-default-bg-color--lighter: #eeeef5;
  --md-default-bg-color--lightest: #e7e7f0;

  --md-default-fg-color: #16161f;
  --md-default-fg-color--light: #55586b;
  --md-default-fg-color--lighter: #6a6c7f;
  --md-default-fg-color--lightest: rgba(12, 12, 24, 0.09);

  --md-typeset-color: #16161f;

  /* As above: retained for the `classic` variant, unused by `modern`. */
  --md-primary-fg-color: var(--ll-ink-900);
  --md-primary-fg-color--light: var(--ll-ink-800);
  --md-primary-fg-color--dark: var(--ll-ink-950);
  --md-primary-bg-color: var(--ll-fg);
  --md-primary-bg-color--light: var(--ll-fg-muted);

  --md-accent-fg-color: var(--ll-teal-ink);
  --md-accent-fg-color--transparent: rgba(14, 125, 114, 0.1);
  --md-accent-bg-color: #ffffff;

  --md-typeset-a-color: var(--ll-teal-ink);
  --md-typeset-mark-color: rgba(123, 52, 216, 0.18);
  --md-typeset-table-color: rgba(12, 12, 24, 0.12);

  --md-code-bg-color: #f3f3f8;
  --md-code-fg-color: #16161f;

  --ll-surface: #f3f3f8;
  --ll-line-current: rgba(12, 12, 24, 0.09);
  --ll-line-strong-current: rgba(12, 12, 24, 0.14);
}

/* ===========================================================================
   Code — the signature.

   limnion.ai hand-rolls syntax colors for its hero snippets. This maps
   Pygments' token classes onto that exact set, so every SQL, bash, YAML and
   Rust block across the site reads as the same product.

     tok-kw  pink     tok-fn  teal     tok-str lilac
     tok-num amber    tok-op  purple   tok-cmt dim italic

   Comments stay dim rather than colored and punctuation stays near-foreground:
   the neon is spent on the tokens that carry meaning, which is the same split
   the brand site chose.
   =========================================================================== */

:root[data-md-color-scheme="slate"] {
  --md-code-hl-keyword-color: var(--ll-pink);
  --md-code-hl-operator-color: var(--ll-purple);
  --md-code-hl-function-color: var(--ll-teal);
  --md-code-hl-string-color: var(--ll-lilac);
  --md-code-hl-number-color: var(--ll-amber);
  --md-code-hl-constant-color: var(--ll-amber);
  --md-code-hl-special-color: var(--ll-teal);
  --md-code-hl-variable-color: var(--ll-fg);
  --md-code-hl-name-color: var(--ll-fg);
  --md-code-hl-generic-color: var(--ll-fg-muted);
  --md-code-hl-comment-color: var(--ll-fg-dim-readable);
  --md-code-hl-punctuation-color: var(--ll-fg-muted);
}

:root[data-md-color-scheme="default"] {
  --md-code-hl-keyword-color: var(--ll-pink-ink);
  --md-code-hl-operator-color: var(--ll-purple-ink);
  --md-code-hl-function-color: var(--ll-teal-ink);
  --md-code-hl-string-color: var(--ll-lilac-ink);
  --md-code-hl-number-color: var(--ll-amber-ink);
  --md-code-hl-constant-color: var(--ll-amber-ink);
  --md-code-hl-special-color: var(--ll-teal-ink);
  --md-code-hl-variable-color: #16161f;
  --md-code-hl-name-color: #16161f;
  --md-code-hl-generic-color: #55586b;
  --md-code-hl-comment-color: #6a6c7f;
  --md-code-hl-punctuation-color: #55586b;
}

/* Comments italic, as on the brand site. */
.md-typeset .highlight .c,
.md-typeset .highlight .c1,
.md-typeset .highlight .cm,
.md-typeset .highlight .ch,
.md-typeset .highlight .cs {
  font-style: italic;
}

/* Code blocks get the brand's hairline-bordered surface treatment. */
.md-typeset pre > code {
  border: 1px solid var(--ll-line-current);
  border-radius: 10px;
}

.md-typeset code {
  border-radius: 5px;
}

/* ===========================================================================
   Chrome — the one place the triad gradient appears.

   A 2px strip along the top edge of the header, layered as a background image
   so the theme's own translucent, backdrop-blurred header colour still shows
   through beneath it. One rule, no pseudo-element, no specificity fight.

   Note this deliberately does NOT force a dark header. Zensical's `modern`
   variant colours header text from `--md-default-fg-color` (the page
   foreground), so pinning the header to ink-900 would put dark text on a dark
   bar in light mode. Letting the theme's blended header stand is both correct
   and less CSS; the gradient strip carries the brand signal on its own.
   =========================================================================== */

.md-header {
  background-image: var(--ll-triad);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 2px;
}

/* Text selection — the brand's purple wash. */
::selection {
  background: rgba(180, 106, 255, 0.35);
}

/* ===========================================================================
   Tables — this doc set is table-heavy (the whole reference section), so the
   hairline treatment from the brand's `.surface` idiom earns its place here.
   =========================================================================== */

.md-typeset table:not([class]) {
  border: 1px solid var(--ll-line-current);
  border-radius: 10px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--ll-surface);
  font-weight: 600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-top: 1px solid var(--ll-line-current);
}

/* ===========================================================================
   Admonitions — 53 of them carry real semantic weight in this doc set
   (destructive commands, off-by-default features), so the hues must stay
   legible as a severity ladder while living in the brand world:

     danger  pink    the most aggressive brand hue
     warning amber   sourced from the site's own number token, not stock orange
     note    purple  the triad's centre
     info    teal
     tip     lilac   distinct from info at a glance
   =========================================================================== */

.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-radius: 10px;
  box-shadow: none;
}

/* Each scheme names its five severity hues once (see the scheme blocks above
   for where `--ll-*-ink` comes from), so the rules below are written a single
   time and `color-mix` derives both tint washes from the same value. */
:root[data-md-color-scheme="slate"] {
  --ll-danger: var(--ll-pink);
  --ll-warn: var(--ll-amber);
  --ll-note: var(--ll-purple);
  --ll-info: var(--ll-teal);
  --ll-tip: var(--ll-lilac);
}

:root[data-md-color-scheme="default"] {
  --ll-danger: var(--ll-pink-ink);
  --ll-warn: var(--ll-amber-ink);
  --ll-note: var(--ll-purple-ink);
  --ll-info: var(--ll-teal-ink);
  --ll-tip: var(--ll-lilac-ink);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--ll-danger);
  background-color: color-mix(in srgb, var(--ll-danger) 7%, transparent);
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: color-mix(in srgb, var(--ll-danger) 12%, transparent);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--ll-danger);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--ll-warn);
  background-color: color-mix(in srgb, var(--ll-warn) 7%, transparent);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: color-mix(in srgb, var(--ll-warn) 12%, transparent);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--ll-warn);
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--ll-note);
  background-color: color-mix(in srgb, var(--ll-note) 7%, transparent);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: color-mix(in srgb, var(--ll-note) 12%, transparent);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--ll-note);
}

.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--ll-info);
  background-color: color-mix(in srgb, var(--ll-info) 7%, transparent);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: color-mix(in srgb, var(--ll-info) 12%, transparent);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--ll-info);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--ll-tip);
  background-color: color-mix(in srgb, var(--ll-tip) 7%, transparent);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: color-mix(in srgb, var(--ll-tip) 12%, transparent);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--ll-tip);
}

/* ===========================================================================
   Grid cards (the landing and section index pages) get the `.surface` idiom:
   a hairline border over a barely-there vertical gradient.
   =========================================================================== */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ll-line-current);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.025) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  box-shadow: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--ll-line-strong-current);
  transform: translateY(-1px);
}

:root[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li {
  background: linear-gradient(180deg, #ffffff 0%, #fafafd 100%);
}

/* ===========================================================================
   Quality floor: visible keyboard focus, and no motion for those who ask.
   =========================================================================== */

:where(a, button, .md-nav__link, .md-tabs__link):focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > ul > li:hover {
    transition: none;
    transform: none;
  }
}