/* ==========================================================================
   SMARTCHILLI Corporate Design tokens for the MkDocs Material handbook
   theme (ORG-47). The handbook follows the smartchilli.de WEBSITE brand,
   not the app's own (purple) Material 3 theme.

   Source:   https://smartchilli.de production build
             /assets/index-C5F5E1ul.css (Vite build, fetched 2026-07-22)
   Method:   the site defines its palette as HSL custom properties on
             :root (a shadcn/ui-style token set). Values below are those
             HSL triplets converted to hex. No .dark override block or
             prefers-color-scheme rule was found in the bundle, so the
             site itself is light-mode only - the handbook follows suit
             and does not offer a dark-mode toggle.
   Note:     the actual brand primary is a magenta/pink, NOT the red
             (~#d2322d) that was initially assumed - verified against
             both the CSS custom properties and the logo artwork itself
             (docs/handbuch/img/logo.png), which uses the same pink/
             magenta/plum ring gradient.
   Fonts:    body copy is "Inter" (loaded via theme.font.text in
             mkdocs.yml, self-hosted by MkDocs Material's Google Fonts
             build step); headings use "Space Grotesk", the site's
             display font, loaded below.
   Radius:   the site's --radius token is 1.5rem with frequent use of
             rounded-full (pill) buttons - reflected below in a
             moderately increased, pill-leaning border-radius.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  /* Raw brand tokens, hsl(...) -> hex from smartchilli.de :root */
  --sc-background:      #FBF4F9; /* hsl(320 50% 97%) */
  --sc-foreground:      #310C2A; /* hsl(312 60% 12%) */
  --sc-primary:         #E0007B; /* hsl(327 100% 44%) */
  --sc-secondary:       #A81070; /* hsl(322 83% 36%) */
  --sc-accent:          #73125F; /* hsl(312 73% 26%) */
  --sc-muted:           #F4EBF1; /* hsl(320 30% 94%) */
  --sc-muted-foreground:#744E6D; /* hsl(312 20% 38%) */
  --sc-destructive:     #EF4343; /* hsl(0 84% 60%) */
  --sc-radius: 1.5rem;
}

/* Map the brand tokens onto Material's own CSS variables. Light scheme
   only, since the site has no dark palette to be faithful to. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:              var(--sc-primary);
  --md-primary-fg-color--light:       var(--sc-secondary);
  --md-primary-fg-color--dark:        var(--sc-accent);
  --md-primary-bg-color:              #fff;
  --md-primary-bg-color--light:       hsla(0, 0%, 100%, 0.7);

  --md-accent-fg-color:               var(--sc-secondary);
  --md-accent-fg-color--transparent:  hsla(327, 100%, 44%, 0.1);
  --md-accent-bg-color:               #fff;

  --md-typeset-a-color:               var(--sc-primary);
  --md-default-bg-color:              #fff;
}

/* Body copy stays on Inter (set via theme.font.text); headings use the
   site's display font, Space Grotesk. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Space Grotesk", var(--md-text-font-family), sans-serif;
  font-weight: 600;
  color: var(--sc-foreground);
}

.md-typeset a {
  color: var(--sc-primary);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--sc-secondary);
}

/* Active/hovered navigation entries pick up the brand accent instead of
   Material's default indigo/blue. */
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--sc-secondary);
}

.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--sc-primary);
}

.md-nav__item .md-nav__link--active {
  font-weight: 700;
}

/* Search field accent + a touch of the site's pill-shaped rounding
   (--radius: 1.5rem / rounded-full) without going as far as full pills,
   which read poorly at MkDocs' UI scale. */
.md-search__form {
  border-radius: 0.75rem;
}

.md-search-result__link:hover,
.md-search-result__link[data-md-state="active"] {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset code {
  border-radius: 0.375rem;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 0.75rem;
  border-width: 1px;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--sc-secondary);
}

.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: hsla(327, 100%, 44%, 0.08);
}

.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: var(--sc-secondary);
}

.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: hsla(312, 73%, 26%, 0.08);
}

.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset details.tip > summary::before {
  background-color: var(--sc-accent);
}

/* Buttons inside typeset content (rare, but keep them on-brand) */
.md-typeset .md-button {
  border-radius: 999px;
  background-color: var(--sc-primary);
  border-color: var(--sc-primary);
  color: #fff;
}

.md-typeset .md-button:hover {
  background-color: var(--sc-secondary);
  border-color: var(--sc-secondary);
}

/* Logo in the header: the source logo is a wide horizontal lockup
   (icon + wordmark), constrain its height so it aligns with the header
   without cropping. */
.md-header__button.md-logo img {
  height: 1.6rem;
  width: auto;
}