/* ------------------------------------------------------------------------- *
 * Superspace brand theme — Superspace design system, "tokens only" scope.
 *
 * Linked ONLY by the Superspace build: brands/superspace.toml [config]
 * extra_css lists this file, and build/render.py appends it after the shared
 * fonts.css + extra.css. The CloudPress build never references it.
 *
 * Source: the Superspace design system (brand manual, Nov 2025) —
 *   donkerblauw #001e46  text / UI ink
 *   paarsblauw  #452efa  primary, links (light)
 *   cyaan       #00afff  accent + links (dark scheme)
 *   Space Grotesk (Dystopian stand-in) for H1/H2, Figtree (Proxima Nova
 *   stand-in) for body; see superspace-fonts.css.
 *
 * Colors and fonts go through documented --md-* properties. What has no
 * --md-* knob uses theme classes instead, kept to this file: the wide
 * horizontal logo (the theme sizes the logo slot as a square), square corners
 * (radii are hard-coded per component), the active tab and sidebar markers,
 * and the ss-* elements from the template overrides in overrides/superspace/.
 * ------------------------------------------------------------------------- */

/* Primary + accent. Same selectors as the theme's palette.css; loaded later,
   so these win for the "blue" palette every scheme in zensical.base.toml uses. */
[data-md-color-primary="blue"] {
  --md-primary-fg-color:        #452efa;
  --md-primary-fg-color--light: #6a57fb;
  --md-primary-fg-color--dark:  #3420d1;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}
/* Accent colors the active and hovered nav item: purple on light (cyan is
   ~2.4:1 on white), cyan on the dark ground (purple is too dark there). */
[data-md-color-accent="blue"] {
  --md-accent-fg-color:              #452efa;
  --md-accent-fg-color--transparent: rgba(69, 46, 250, 0.08);
}
[data-md-color-scheme="slate"][data-md-color-accent="blue"] {
  --md-accent-fg-color:              #00afff;
  --md-accent-fg-color--transparent: rgba(0, 175, 255, 0.12);
}

/* Light scheme: donkerblauw ink instead of black. */
[data-md-color-scheme="default"] {
  --md-default-fg-color:           #001e46;
  --md-default-fg-color--light:    rgba(0, 30, 70, 0.66);
  --md-default-fg-color--lighter:  rgba(0, 30, 70, 0.32);
  --md-default-fg-color--lightest: rgba(0, 30, 70, 0.07);
  --md-code-fg-color:              #001e46;
  --md-code-bg-color:              #f4f7fb;
  --md-code-bg-color--light:       rgba(244, 247, 251, 0.7);
  --md-code-bg-color--lighter:     rgba(244, 247, 251, 0.3);
  --md-typeset-a-color:            #452efa;
}

/* Dark scheme: a donkerblauw ramp, replacing the shared dark-gray one in
   extra.css. Links switch to cyan; purple fails contrast on this ground. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #001233;
  --md-default-bg-color--light:    #001e46;
  --md-default-bg-color--lighter:  #0a2c5c;
  --md-default-bg-color--lightest: #1c3f74;
  --md-default-fg-color:           rgba(231, 237, 245, 0.9);
  --md-default-fg-color--light:    rgba(231, 237, 245, 0.62);
  --md-default-fg-color--lighter:  rgba(231, 237, 245, 0.32);
  --md-default-fg-color--lightest: rgba(231, 237, 245, 0.12);
  --md-code-fg-color:              #e7edf5;
  --md-code-bg-color:              #001e46;
  --md-code-bg-color--light:       rgba(0, 30, 70, 0.9);
  --md-code-bg-color--lighter:     rgba(0, 30, 70, 0.54);
  --md-typeset-a-color:            #00afff;
}

/* Fonts: Figtree body; Space Grotesk for H1/H2 (H3 down stays body, per the
   brand: the display face is never used below H2). */
:root {
  --md-text-font: "Figtree";
}
.md-typeset h1,
.md-typeset h2 {
  font-family: "Space Grotesk", var(--md-text-font-family);
}
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-typeset h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Logo: the horizontal lockup needs a wide slot. In the dark scheme it is
   rendered white — the manual allows only donkerblauw, black or white. */
.md-header__button.md-logo,
.md-nav__title .md-logo {
  width: auto;
}
.md-header__button.md-logo img,
.md-nav__title .md-logo img {
  height: 1.2rem;
  width: auto;
}
[data-md-color-scheme="slate"] .md-logo img {
  filter: brightness(0) invert(1);
}

/* Active top tab: a 3px accent bar instead of the theme's 1px text-colored
   line. Width and color only, so the theme's [hidden] rule still clears it. */
.md-tabs__item--active {
  border-bottom-width: 0.15rem;
  border-bottom-color: var(--md-accent-fg-color);
}

/* Active sidebar item: a thick accent bar on the left instead of a tinted
   pill. An inset shadow, so the label does not shift. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  background: transparent;
  box-shadow: inset 0.15rem 0 0 var(--md-accent-fg-color);
}

/* Header title (overrides/superspace/partials/header.html): "documentatie"
   beside the logo, the full site name where the theme hides the logo. */
.ss-title--short {
  display: none;
  padding-left: 0.6rem;
  border-left: 0.05rem solid var(--md-default-fg-color--lighter);
  font-family: "Space Grotesk", var(--md-text-font-family);
  font-weight: 500;
  color: var(--md-default-fg-color--light);
}
@media screen and (min-width: 76.25em) {
  .ss-title--full  { display: none; }
  .ss-title--short { display: inline; }
}

/* Language selector (overrides/superspace/partials/alternate.html): globe,
   current language, chevron. Icon only on narrow screens. */
.md-header__button.ss-lang {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: auto;
}
.ss-lang__label {
  font-size: 0.7rem;
  font-weight: 500;
}
.ss-lang__chevron svg {
  width: 0.8rem;
  height: 0.8rem;
}
@media screen and (max-width: 59.984375em) {
  .ss-lang__label,
  .ss-lang__chevron { display: none; }
}

/* Square corners on content and navigation surfaces. */
.md-typeset code,
.md-typeset pre > code,
.md-typeset kbd,
.md-typeset table:not([class]),
.md-typeset .admonition,
.md-typeset details,
.md-typeset details:not([open]) > summary,
.md-typeset .md-button,
.md-typeset .tabbed-labels > label,
.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card,
.md-clipboard,
.md-code__nav,
.md-content__button,
.md-nav__link,
.md-search__button,
.md-search__button::after,
.md-select__inner,
.md-select__list,
.md-sidebar--primary,
.md-sidebar--secondary .md-sidebar__inner,
.md-top {
  border-radius: 0;
}