/* ============================================================
   LoL Gameplay Kit docs — "blueprint" skin for Material for MkDocs
   ------------------------------------------------------------
   Shares the LoL Engine docs theme so the Kit site (lol-kit.moomoo.games)
   reads as the same product family. Unifies the hosted docs with the
   moomoo.games site theme: the cool blueprint navy (#0A2036),
   slate blue (#44749D), honey / terracotta accents, and the
   Bricolage / Hanken Grotesk / JetBrains Mono type stack.

   Referenced via extra_css in mkdocs.yml; staged into the site by
   Tools/build-docs.sh. The palette uses primary: custom / accent:
   custom, so the attribute selectors below apply.

     · DARK  mode  = full #0A2036 blueprint immersion — the same
                     look as the LoL Engine hero on moomoo.games.
                     This is the DEFAULT first impression (see palette
                     order in mkdocs.yml).
     · LIGHT mode  = blue "blueprint canvas" — a slate-blue #44749D
                     gridded field with white content cards floating
                     on it, like the moomoo.games interior pages.

   Body + code fonts are loaded by Material (theme.font in
   mkdocs.yml); only the Bricolage display face is pulled in here.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&display=swap");

/* ---------- shared brand tokens (both schemes) ---------- */
:root {
  /* slate blue (primary thread, from moomoo.games) */
  --lol-blue:        #44749D;
  --lol-blue-light:  #5d89ad;
  --lol-blue-dark:   #345a78;
  --lol-node:        #87A9C6;   /* light-blue node / dark-mode links */
  /* cool blueprint navy scale (the "dark colors") */
  --lol-navy-950:    #06182B;
  --lol-navy-900:    #0A2036;   /* PRIMARY GROUND */
  --lol-navy-850:    #0E263F;
  --lol-navy-800:    #12304E;
  /* warm connective accents (tie back to the publisher brand) */
  --lol-honey:       #E3A857;
  --lol-honey-soft:  #F0C888;
  --lol-clay:        #BC7A50;
  --lol-clay-deep:   #7E4E30;
  /* blueprint grid lines */
  --lol-grid-strong: rgba(126, 164, 197, .15);   /* 140px major (dark) */
  --lol-grid-faint:  rgba(126, 164, 197, .06);    /*  28px minor (dark) */
  /* display face for headings */
  --lol-display: "Bricolage Grotesque", var(--md-text-font, "Hanken Grotesk"), system-ui, sans-serif;
}

/* ---------- primary / accent (apply in both schemes) ---------- */
[data-md-color-primary=custom] {
  --md-primary-fg-color:        #44749D;
  --md-primary-fg-color--light: #5d89ad;
  --md-primary-fg-color--dark:  #345a78;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}
[data-md-color-accent=custom] {
  --md-accent-fg-color:              #345a78;
  --md-accent-fg-color--transparent: #44749d1a;
}

/* ============================================================
   Type — Bricolage for display headings, tightened like the site
   ============================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title,
.md-typeset .admonition-title {
  font-family: var(--lol-display);
  letter-spacing: -0.02em;
}
.md-typeset h1 { font-weight: 700; letter-spacing: -0.03em; }
.md-typeset h2 { font-weight: 700; }
.md-header__title { font-weight: 700; }

/* ============================================================
   LIGHT MODE  (scheme: default) — blue "blueprint canvas"
   ------------------------------------------------------------
   A slate-blue #44749D gridded field with the article floating as
   a white card, exactly like the moomoo.games interior pages.
   Chrome (nav, TOC, header) is pale text on the blue; the white
   card carries dark ink so the docs stay fully readable.
   ============================================================ */
[data-md-color-scheme="default"] {
  /* blue canvas — this is also the mobile nav-drawer background */
  --md-default-bg-color:          #44749D;
  --md-default-fg-color:          #EAF1F7;                    /* chrome text on blue */
  --md-default-fg-color--light:   rgba(234, 241, 247, .74);
  --md-default-fg-color--lighter: rgba(234, 241, 247, .44);
  --md-default-fg-color--lightest:rgba(234, 241, 247, .16);

  /* the article card is white, so its text is set independently of the chrome */
  --md-typeset-color:  #242019;
  --md-typeset-a-color:#2E4D6B;                               /* blue-700 links on white */
  --md-typeset-mark-color: rgba(227, 168, 87, .40);
  --md-accent-fg-color: #7E4E30;                              /* link hover on the card (terracotta) */

  --md-code-bg-color: var(--lol-navy-900);                    /* dark-navy code plate */
  --md-code-fg-color: #D7CFC0;

  --md-footer-bg-color:       var(--lol-navy-900);
  --md-footer-bg-color--dark: var(--lol-navy-950);
  --md-footer-fg-color:       #E8EEF4;
  --md-footer-fg-color--light:#9DB2C6;
  --md-footer-fg-color--lighter: rgba(157, 178, 198, .6);
}

/* blueprint grid on the blue canvas — white major lines + navy minor lines */
[data-md-color-scheme="default"] .md-main {
  background-color: #44749D;
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(rgba(6, 24, 43, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 24, 43, .13) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
}

/* the article floats as a white card on the blue — moomoo's #view panel */
[data-md-color-scheme="default"] .md-content {
  /* re-scope the fg tokens to dark INSIDE the white card, so h1 / blockquotes /
     muted text stay readable, while the chrome (nav, TOC) keeps its pale-on-blue
     tokens set at the scheme level above. */
  --md-default-fg-color:          #242019;
  --md-default-fg-color--light:   #544C40;
  --md-default-fg-color--lighter: #6E665A;
  --md-default-fg-color--lightest:#9A9184;
  background: #ffffff;
  border: 1px solid rgba(24, 42, 59, .22);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(16, 31, 43, .18), 0 20px 44px -28px rgba(16, 31, 43, .55);
  margin: 22px 0 34px;
}
@media screen and (min-width: 60em) {
  [data-md-color-scheme="default"] .md-content { margin: 22px 6px 34px; }
}

/* inline code chip stays a light slate-blue pill on the white card */
[data-md-color-scheme="default"] .md-typeset :not(pre) > code {
  background-color: #ECF1F6;
  color: #2E4D6B;
}

/* chrome on the blue: near-white rails (AA-legible on #44749D), honey active
   markers, punchy ink page title, and a shadow separating the header from the canvas.
   Nav links otherwise inherit the dark content color, so they're set explicitly here. */
[data-md-color-scheme="default"] .md-sidebar .md-nav__link,
[data-md-color-scheme="default"] .md-sidebar .md-nav__title { color: #ffffff; }
[data-md-color-scheme="default"] .md-nav__item--section > .md-nav__link { color: rgba(255, 255, 255, .72); }
[data-md-color-scheme="default"] .md-sidebar .md-nav__link:hover,
[data-md-color-scheme="default"] .md-sidebar .md-nav__link--active { color: #F7D08A; }
[data-md-color-scheme="default"] .md-typeset h1 { color: #17150F; }
[data-md-color-scheme="default"] .md-header {
  box-shadow: 0 2px 10px rgba(6, 24, 43, .28), inset 0 -2px 0 var(--lol-honey);
}

/* ============================================================
   DARK MODE  (scheme: slate) — full #0A2036 blueprint immersion
   ============================================================ */
[data-md-color-scheme="slate"] {
  --md-hue: 210;

  --md-default-bg-color:          #0A2036;   /* blueprint ground */
  --md-default-fg-color:          #E8EEF4;
  --md-default-fg-color--light:   #9DB2C6;
  --md-default-fg-color--lighter: #6E859B;
  --md-default-fg-color--lightest:#4b6178;

  --md-typeset-color:  #E8EEF4;
  --md-typeset-a-color:#87A9C6;               /* light-blue node links */
  --md-typeset-mark-color: rgba(227, 168, 87, .30);

  --md-code-bg-color: #06182B;                /* deeper than the page */
  --md-code-fg-color: #D6E2ED;

  --md-footer-bg-color:       #06182B;
  --md-footer-bg-color--dark: #030c14;
  --md-footer-fg-color:       #E8EEF4;
  --md-footer-fg-color--light:#9DB2C6;
  --md-footer-fg-color--lighter: rgba(157, 178, 198, .55);

  /* accent (nav active, link hover) leans to the light-blue node */
  --md-accent-fg-color: #A8C4DC;
}

/* the blueprint grid — fine 28px minor + 140px major, exactly like .eng */
[data-md-color-scheme="slate"] .md-main {
  background-color: #0A2036;
  background-image:
    linear-gradient(var(--lol-grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--lol-grid-strong) 1px, transparent 1px),
    linear-gradient(var(--lol-grid-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--lol-grid-faint) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
}

/* content panels float as translucent navy cards on the grid */
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: rgba(135, 169, 198, .16);
  color: #CFE0EE;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background-color: rgba(14, 38, 63, .6);
  border: 1px solid rgba(135, 169, 198, .22);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(20, 48, 78, .7);
  color: #EEF3F8;
}

/* ============================================================
   Header — slate-blue drafting grid + honey underline (both modes)
   ============================================================ */
.md-header {
  background-color: var(--lol-blue);
  background-image:
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(rgba(6, 24, 43, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 24, 43, .16) 1px, transparent 1px);
  background-size: 112px 112px, 112px 112px, 28px 28px, 28px 28px;
  box-shadow: 0 0 0 transparent, inset 0 -2px 0 var(--lol-honey);
}
[data-md-color-scheme="slate"] .md-header {
  background-color: var(--lol-navy-950);
}
/* keep search field legible on the gridded header */
.md-search__form { background-color: rgba(255, 255, 255, .14); }
.md-search__form:hover { background-color: rgba(255, 255, 255, .22); }

/* ============================================================
   Code blocks — navy plate + honey copy button, tuned syntax hues
   ============================================================ */
.md-typeset pre > code {
  border-radius: 10px;
}
.highlight .filename,
.md-typeset .highlighttable .linenos {
  color: #6E859B;
}
:root {
  /* syntax hues tuned for the navy plate (adapted from the site .code) */
  --md-code-hl-keyword-color:     #8FB3D2;
  --md-code-hl-function-color:    #C9A06A;
  --md-code-hl-name-color:        #D6E2ED;
  --md-code-hl-string-color:      #9CC5A1;
  --md-code-hl-number-color:      #E3A857;
  --md-code-hl-constant-color:    #C9A06A;
  --md-code-hl-special-color:     #E3A857;
  --md-code-hl-operator-color:    #B9CEE0;
  --md-code-hl-punctuation-color: #9DB2C6;
  --md-code-hl-comment-color:     #6E859B;
  --md-code-hl-variable-color:    #CFE0EE;
  --md-code-hl-color:             #E3A857;
  --md-code-hl-color--light:      rgba(227, 168, 87, .12);
}
.md-clipboard { color: rgba(214, 226, 237, .5); }
.md-clipboard:hover { color: var(--lol-honey); }

/* ============================================================
   Admonitions — reflavored with the blueprint palette
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 12px;
  border-left-width: .2rem;
}
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: rgba(14, 38, 63, .6);
  border-color: rgba(135, 169, 198, .22);
}
/* note / info → slate blue */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract {
  border-left-color: var(--lol-blue);
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .abstract > .admonition-title { color: var(--lol-blue-light); }
/* tip / example → honey */
.md-typeset .admonition.tip,
.md-typeset .admonition.example,
.md-typeset .admonition.success {
  border-left-color: var(--lol-honey);
}
.md-typeset .tip > .admonition-title,
.md-typeset .example > .admonition-title,
.md-typeset .success > .admonition-title { color: var(--lol-honey); }
/* warning / danger → terracotta */
.md-typeset .admonition.warning,
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.bug {
  border-left-color: var(--lol-clay);
}

/* ============================================================
   Navigation — honey active marker, blueprint left rail
   ============================================================ */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}
/* section labels (navigation.sections) read like the site's mono eyebrows */
.md-nav__item--section > .md-nav__link {
  font-family: var(--md-code-font, "JetBrains Mono"), monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
  color: var(--lol-node);
}

/* right-hand table of contents active marker → honey */
.md-nav--secondary .md-nav__link--active {
  color: var(--lol-clay-deep);
}
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--lol-honey);
}

/* accent bar on the left of the active TOC item */
[data-md-color-scheme="slate"] .md-sidebar--secondary
  .md-nav__list .md-nav__item .md-nav__link--active { font-weight: 600; }

/* ============================================================
   Misc polish — tables, hr, blockquote, buttons, footer links
   ============================================================ */
.md-typeset table:not([class]) th { font-family: var(--lol-display); }
.md-typeset hr { border-bottom-color: rgba(126, 164, 197, .2); }
.md-typeset blockquote {
  border-left-color: var(--lol-clay);
  color: var(--md-default-fg-color--light);
}
/* primary buttons (.md-button--primary) → slate blue, honey on hover */
.md-typeset .md-button--primary {
  background-color: var(--lol-blue);
  border-color: var(--lol-blue);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--lol-clay);
  border-color: var(--lol-clay);
}
.md-footer-meta a:hover,
.md-footer__link:hover .md-footer__title { color: var(--lol-honey); }

/* selection matches the site (slate blue / white) */
::selection { background: var(--lol-blue); color: #fff; }
[data-md-color-scheme="slate"] ::selection { background: var(--lol-honey); color: #241a0c; }