/*
 * Erscheinungsbild des E-Commerce Hub (ecommerce-hub.sh) für das Portal.
 *
 * Farben, Schriften, Rundungen und Schatten sind aus den Design-Tokens der
 * Hub-Seite übernommen und auf die Variablen von Material for MkDocs
 * gelegt. Die Schriften liegen im Portal selbst (docs/assets/fonts, SIL Open
 * Font License), damit kein Aufruf an Google Fonts geht.
 */

/* ---- Schriften ---- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/Inter-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../assets/fonts/SpaceGrotesk.woff2") format("woff2");
}

/* ---- Design-Tokens des Hubs ---- */

:root {
    --hub-brand-dark: #111440;
    --hub-brand-dark-2: #1a1f5a;
    --hub-brand-darkest: #050722;
    --hub-brand-primary: #0c46f2;
    --hub-radius-sm: 8px;
    --hub-radius-md: 12px;
    --hub-shadow-sm: 0 2px 6px #1114400f;
    --hub-shadow-focus: 0 0 0 3px #0c46f240;

    --md-text-font: "Inter";
    --md-code-font: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* Kopfzeile und Reiter sind in beiden Schemata Hub-Marineblau */
[data-md-color-primary="custom"] {
    --md-primary-fg-color: var(--hub-brand-dark);
    --md-primary-fg-color--light: var(--hub-brand-dark-2);
    --md-primary-fg-color--dark: var(--hub-brand-darkest);
    --md-primary-bg-color: #fff;
    --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
    --md-accent-fg-color: var(--hub-brand-primary);
    --md-accent-fg-color--transparent: #0c46f21a;
    --md-accent-bg-color: #fff;
    --md-accent-bg-color--light: #ffffffb3;
}

/*
 * Hell: die Werte der Hub-Seite.
 * Alle Farben, die sich zwischen hell und dunkel unterscheiden, laufen über
 * diese Variablen. Fest gesetzte Farben wären im dunklen Schema unlesbar.
 */
[data-md-color-scheme="default"] {
    --md-default-fg-color: #111440;
    --md-default-fg-color--light: #4c5468;
    --md-default-fg-color--lighter: #c2c9d6;
    --md-default-fg-color--lightest: #eef1f6;
    --md-typeset-color: #111440;
    --md-typeset-a-color: #0c46f2;
    --md-code-bg-color: #f7f8fb;
    --md-code-fg-color: #111440;
    --md-footer-bg-color: #111440;
    --md-footer-bg-color--dark: #050722;

    --hub-link-hover: #0a3cd0;
    --hub-flaeche: #f7f8fb;
    --hub-rand: #dde2ec;
    --hub-info: #0c46f2;
    --hub-info-flaeche: #eaf0fe;
    --hub-tipp: #2f6a2a;
    --hub-tipp-flaeche: #e3e8e0;
    --hub-warnung: #b8390c;
    --hub-warnung-flaeche: #fde1d6;
    --hub-gefahr: #b53030;
    --hub-gefahr-flaeche: #fbe0e0;
}

/*
 * Dunkel: die Hub-Seite hat kein dunkles Schema, abgeleitet aus ihren
 * dunklen Flächen (#050722, #111440). Kontraste auf dem Seitengrund
 * #0c0f2e: Text 15:1, gedämpfter Text 9:1, Links 7,6:1. Die Statusfarben
 * sind aufgehellt, das Hub-Blau #0c46f2 hätte auf dunklem Grund zu wenig
 * Kontrast.
 */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0c0f2e;
    --md-default-bg-color--light: #0c0f2eb3;
    --md-default-fg-color: #e6e9f5;
    --md-default-fg-color--light: #b3bad0;
    --md-default-fg-color--lighter: #4a527a;
    --md-default-fg-color--lightest: #1a1f4d;
    --md-typeset-color: #e6e9f5;
    --md-typeset-a-color: #7da3ff;
    --md-accent-fg-color: #7da3ff;
    --md-accent-fg-color--transparent: #7da3ff1a;
    --md-code-bg-color: #151a45;
    --md-code-fg-color: #e6e9f5;
    --md-footer-bg-color: #050722;
    --md-footer-bg-color--dark: #03041a;
    --md-shadow-z2: 0 4px 12px #00000066;
    --hub-shadow-sm: 0 2px 6px #00000040;
    --hub-shadow-focus: 0 0 0 3px #7da3ff59;

    --hub-link-hover: #a8c1ff;
    --hub-flaeche: #151a45;
    --hub-rand: #2a3166;
    --hub-info: #7da3ff;
    --hub-info-flaeche: #16235c;
    --hub-tipp: #7cc37a;
    --hub-tipp-flaeche: #1a3320;
    --hub-warnung: #ff8a5c;
    --hub-warnung-flaeche: #3d1d10;
    --hub-gefahr: #ff7b7b;
    --hub-gefahr-flaeche: #3d1717;
}

/* ---- Typografie ---- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-family: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
    color: var(--md-default-fg-color);
    letter-spacing: -0.01em;
}

.md-typeset h1 {
    font-weight: 700;
}

.md-typeset h2,
.md-typeset h3 {
    font-weight: 500;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    color: var(--md-default-fg-color);
    font-weight: 600;
}

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

/* ---- Kopfzeile und Navigation ---- */

.md-tabs__link {
    font-weight: 500;
    opacity: 0.8;
}

.md-tabs__link--active,
.md-tabs__link:hover {
    opacity: 1;
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
    color: var(--md-typeset-a-color);
    font-weight: 600;
}

/* ---- Bausteine: Tabellen, Code, Hinweise ---- */

.md-typeset table:not([class]) {
    border: 1px solid var(--hub-rand);
    border-radius: var(--hub-radius-sm);
    box-shadow: var(--hub-shadow-sm);
}

.md-typeset table:not([class]) th {
    background: var(--hub-flaeche);
    color: var(--md-default-fg-color);
}

.md-typeset pre > code,
.md-typeset .highlight {
    border-radius: var(--hub-radius-sm);
}

.md-typeset .admonition,
.md-typeset details {
    border-radius: var(--hub-radius-sm);
    box-shadow: var(--hub-shadow-sm);
}

/* Hinweisboxen in den Hub-Farben. Material steuert Rahmen, Titelzeile und
   Symbol über eine Farbe je Typ. */
.md-typeset .admonition.note,
.md-typeset .admonition.info {
    border-color: var(--hub-info);
}

.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title {
    background-color: var(--hub-info-flaeche);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before {
    background-color: var(--hub-info);
}

.md-typeset .admonition.tip {
    border-color: var(--hub-tipp);
}

.md-typeset .tip > .admonition-title {
    background-color: var(--hub-tipp-flaeche);
}

.md-typeset .tip > .admonition-title::before {
    background-color: var(--hub-tipp);
}

.md-typeset .admonition.warning {
    border-color: var(--hub-warnung);
}

.md-typeset .warning > .admonition-title {
    background-color: var(--hub-warnung-flaeche);
}

.md-typeset .warning > .admonition-title::before {
    background-color: var(--hub-warnung);
}

.md-typeset .admonition.danger {
    border-color: var(--hub-gefahr);
}

.md-typeset .danger > .admonition-title {
    background-color: var(--hub-gefahr-flaeche);
}

.md-typeset .danger > .admonition-title::before {
    background-color: var(--hub-gefahr);
}

/* ---- Fokus wie auf der Hub-Seite ---- */

.md-typeset a:focus-visible,
.md-typeset button:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible {
    outline: none;
    box-shadow: var(--hub-shadow-focus);
    border-radius: 4px;
}