/* Console palette for the docs site: both Material schemes mirror the Vuetify
   themes the Console declares in frontend/src/vuetify.ts. Light rides the
   Netpreme brand palette (Purple primary #6F60F5, Pink accent #AD1457, Off
   White ground #FFFBF4); dark rides the stock-M3 ramp the Console shares
   (#141218 ink ground, lilac primary #D0BCFF, pink accent #EFB8C8). The
   precomputed blends below use the Console's own technique from vuetify.ts:
   palette colors at a fixed alpha over the ground. When the Console palette
   moves, move this file with it. */

[data-md-color-scheme="default"] {
  /* Typeset: console on-surface #000000, muted on-surface-variant #61605D,
     and the same 45%/7% ink blends Material uses for captions and rules. */
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: #61605D;
  --md-default-fg-color--lighter: rgba(0, 0, 0, .45);
  --md-default-fg-color--lightest: rgba(0, 0, 0, .07);
  --md-default-bg-color: #FFFBF4;

  /* Keep primary as the brand color for controls; style the header separately. */
  --md-primary-fg-color: #6F60F5;
  /* A darker primary for controls that request the dimmed role. */
  --md-primary-fg-color--dark: #5E52D0;
  --md-primary-bg-color: #FFFFFF;
  --docs-surface: #FFFFFF;
  --docs-surface-muted: #F7F5F1;
  --docs-outline: #DBD4F4;
  --docs-selected: rgba(111, 96, 245, .08);

  /* Console accent pink: link hover and the small Material flashes that draw
     on the accent. */
  --md-accent-fg-color: #AD1457;
  --md-accent-fg-color--transparent: rgba(173, 20, 87, .1);

  /* Darken purple for small text on cream and selected-row backgrounds.
     The brand mark and primary controls retain the Console primary. */
  --md-typeset-a-color: #6455DD;

  /* Code windows ride the surface like the Console's Coding Agents panels:
     white ground, black ink, and the light-token syntax ramp from
     styles.css (indigo keywords, violet functions, deep-green strings,
     error-red numbers, muted comments). */
  --md-code-bg-color: #FFFFFF;
  --md-code-fg-color: #000000;
  --md-code-hl-color: #6F60F5;
  --md-code-hl-color--light: rgba(111, 96, 245, .1);
  --md-code-hl-keyword-color: #3A56C9;
  --md-code-hl-function-color: #7C4DA3;
  --md-code-hl-constant-color: #7C4DA3;
  --md-code-hl-variable-color: #145C9E;
  --md-code-hl-string-color: #1B6B3A;
  --md-code-hl-number-color: #B3261E;
  --md-code-hl-comment-color: #61605D;
}

[data-md-color-scheme="slate"] {
  /* Retint Material's residual hsla() tones (kbd, table, tooltip) from the
     stock blue-gray hue toward the console ink's hue. */
  --md-hue: 260deg;

  /* Console dark on-surface #E6E1E5 and its muted #CAC4D0, with the same
     alpha ladder Material applies. */
  --md-default-fg-color: #E6E1E5;
  --md-default-fg-color--light: #CAC4D0;
  --md-default-fg-color--lighter: #726F74;
  --md-default-fg-color--lightest: rgba(230, 225, 229, .12);
  --md-default-bg-color: #141218;
  --md-default-bg-color--light: rgba(20, 18, 24, .54);
  --md-default-bg-color--lighter: rgba(20, 18, 24, .26);
  --md-default-bg-color--lightest: rgba(20, 18, 24, .07);

  /* Brand roles stay lilac even when the header uses the page ground. */
  --md-primary-fg-color: #D0BCFF;
  --md-primary-fg-color--dark: #B1A0D9;
  --md-primary-bg-color: #381E72;
  --md-primary-bg-color--light: rgba(56, 30, 114, .7);
  --docs-surface: #1D1B20;
  --docs-surface-muted: #1D1B20;
  --docs-outline: #49454F;
  --docs-selected: rgba(208, 188, 255, .10);

  --md-accent-fg-color: #EFB8C8;
  --md-accent-fg-color--transparent: rgba(239, 184, 200, .12);

  /* Lilac is the dark theme's primary everywhere — links included. */
  --md-typeset-a-color: #D0BCFF;

  /* The console's dark code-window ink (#15181E, #D8DEE9) with the dark
     syntax ramp from styles.css (blue keywords, violet functions, green
     strings, amber numbers, blue-gray comments). */
  --md-code-bg-color: #15181E;
  --md-code-fg-color: #D8DEE9;
  --md-code-bg-color--light: rgba(21, 24, 30, .9);
  --md-code-bg-color--lighter: rgba(21, 24, 30, .54);
  --md-code-hl-color: #D0BCFF;
  --md-code-hl-color--light: rgba(208, 188, 255, .1);
  --md-code-hl-keyword-color: #82AAFF;
  --md-code-hl-function-color: #C792EA;
  --md-code-hl-constant-color: #C792EA;
  --md-code-hl-variable-color: #89DDFF;
  --md-code-hl-string-color: #7EE2A8;
  --md-code-hl-number-color: #F0C07A;
  --md-code-hl-comment-color: #8A93A5;
}

/* Reuse the Console's locally hosted brand typefaces. */
@font-face {
  font-family: ALTRiviera;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/ALTRiviera-Regular.otf") format("opentype");
}
@font-face {
  font-family: ALTRiviera;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/ALTRiviera-Light.otf") format("opentype");
}
:root {
  --md-text-font: ALTRiviera, Arial, sans-serif;
  --md-code-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* A quiet app bar, matching AppShell.vue's background and bottom border. */
.md-header, .md-header--shadow {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--docs-outline);
  box-shadow: none;
}
.md-header__button.md-logo, .md-header__topic:first-child {
  color: var(--md-primary-fg-color);
}
/* Material parks the site title a full 1rem past the logo button's own .6rem
   halo; the Console's mark-to-wordmark gap is closer, so fold the extra
   margin away. The [dir=ltr] scope matches Material's own override — a plain
   selector would lose to it. */
[dir=ltr] .md-header__title { margin-left: 0; }
/* Center the mark and the title text on one axis for real. Material leaves
   .md-header__title non-positioned, so its abspos topics escape upward and
   only approximate centering through line-height; with the brand typeface
   that lands shy of the mark's middle. Position the title, flex-center its
   topics, and flex-center the mark inside its button — one shared axis. */
[dir=ltr] .md-header__title, [dir=rtl] .md-header__title {
  position: relative;
  display: flex;
  align-items: center;
}
.md-header__button.md-logo {
  display: inline-flex;
  align-items: center;
}
.md-header__button.md-logo svg { height: 1.1rem; }
.md-header__option {
  color: var(--md-typeset-a-color);
  background: var(--docs-selected);
  border-radius: 2rem;
  margin-right: .5rem;
}

/* Search remains readable when collapsed, focused, and showing results. */
.md-search__form, .md-search__form:hover {
  background: var(--docs-surface-muted);
  color: var(--md-default-fg-color);
  border-radius: .5rem;
  box-shadow: inset 0 0 0 1px var(--docs-outline);
}
.md-search__input::placeholder,
.md-search__input + .md-search__icon {
  color: var(--md-default-fg-color--light);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--docs-surface);
  border-radius: .5rem .5rem 0 0;
  box-shadow: inset 0 0 0 1px var(--md-typeset-a-color);
}
.md-search__scrollwrap { background: var(--docs-surface); }
.md-search__output { border-radius: 0 0 .5rem .5rem; }

/* Selection uses a purple wash, while ordinary navigation stays neutral. */
.md-nav--primary .md-nav__link {
  padding: .35rem .6rem;
  margin-top: .15rem;
  border-radius: .4rem;
}
.md-nav--primary .md-nav__link--active {
  background: var(--docs-selected);
  font-weight: 700;
}
.md-nav--primary .md-nav__link:hover { background: var(--docs-selected); }
.md-nav--secondary { border-left: 1px solid var(--docs-outline); }
.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* Surface and edge roles distinguish examples and tables from the page. */
.md-typeset .highlight pre, .md-typeset pre > code {
  border-radius: .5rem;
}
.md-typeset pre > code { border: 1px solid var(--docs-outline); }
.md-typeset .tabbed-labels {
  --md-default-fg-color: var(--md-typeset-a-color);
  border-bottom-color: var(--docs-outline);
}
.md-typeset table:not([class]) {
  background: var(--docs-surface);
  border: 1px solid var(--docs-outline);
  border-radius: .5rem;
  overflow: hidden;
}
.md-typeset table:not([class]) th { background: var(--docs-selected); }
.md-typeset table:not([class]) td { border-top-color: var(--docs-outline); }
.md-typeset .md-code__button {
  color: var(--md-default-fg-color--light);
  opacity: .7;
}
.md-typeset .md-code__button:hover {
  color: var(--md-typeset-a-color);
  opacity: 1;
}
.md-footer, .md-footer-meta {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
}
.md-copyright { color: var(--md-default-fg-color--light); }
/* Material's footer anchors carry its dark-band whites through
   `html .md-footer-meta.md-typeset a`; the authors' rule outranks a plain
   `.md-copyright a`, so the attribution's link half washed out of this
   ground-on-ground footer. Scope under the same two classes to win it back. */
.md-footer-meta.md-typeset .md-copyright a { color: var(--md-default-fg-color--light); }
.md-footer-meta.md-typeset .md-copyright a:hover { color: var(--md-default-fg-color); }
:focus-visible { outline-color: var(--md-typeset-a-color); }

/* Material paints the mobile drawer title using primary; keep it quiet too. */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--md-default-bg-color);
    color: var(--md-typeset-a-color);
  }
}