/*
 * Furbase-Anstrich für das Wiki (Docmost).
 *
 * Docmost lässt sich nicht von innen umfärben — es gibt keine Einstellung
 * dafür. Diese Datei wird deshalb vom nginx in die Seite eingehängt.
 *
 * Bewusst zurückhaltend: Docmost ist ein fremdes Programm, das mit jedem
 * Abbild andere Klassennamen bekommen kann. Deshalb wird fast ausschliesslich
 * über die CSS-Variablen von Mantine gearbeitet, die das Gerüst von Docmost
 * bilden — die überleben ein Update. Klassennamen werden nur dort angefasst,
 * wo es keine Variable gibt, und dann so, dass ein Fehlschlag nur bedeutet:
 * es sieht aus wie vorher, nichts ist kaputt.
 *
 * Schriften liegen lokal auf diesem Server. Google Fonts einzubinden wäre
 * einfacher gewesen, hätte aber eine Datenschutz-Frage aufgeworfen, die wir
 * uns nicht einhandeln müssen.
 */

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

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/branding/fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/branding/fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/branding/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/branding/fonts/nunito-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/branding/fonts/nunito-sans-latin-500-normal.woff2') format('woff2');
}

/* ---------------------------------------------------------------- Farben */

:root {
    --furbase-orange: #ff6b43;
    --furbase-orange-dunkel: #e85a34;
    --furbase-orange-hell: #fff1ec;
    --furbase-blau: #01355f;
    --furbase-text: #0d1e28;
    --furbase-gruen: #06ba7e;

    /*
     * Docmost benutzt Mantines „blue" als Primärfarbe. Statt jede einzelne
     * Schaltfläche zu suchen, wird die Primärfarbe selbst umdefiniert — damit
     * folgt alles, was Docmost als „primär" zeichnet, dem Furbase-Orange.
     */
    --mantine-primary-color-0: #fff1ec;
    --mantine-primary-color-1: #ffe0d6;
    --mantine-primary-color-2: #ffc0ad;
    --mantine-primary-color-3: #ff9e80;
    --mantine-primary-color-4: #ff835e;
    --mantine-primary-color-5: #ff7149;
    --mantine-primary-color-6: #ff6b43;
    --mantine-primary-color-7: #e85a34;
    --mantine-primary-color-8: #cf4e2c;
    --mantine-primary-color-9: #b54223;

    --mantine-primary-color-filled: var(--furbase-orange);
    --mantine-primary-color-filled-hover: var(--furbase-orange-dunkel);
    --mantine-primary-color-light: var(--furbase-orange-hell);
    --mantine-primary-color-light-hover: #ffe0d6;
    --mantine-primary-color-light-color: var(--furbase-orange-dunkel);
    --mantine-primary-color-contrast: #ffffff;

    /* Die Schriften der App: Poppins für Überschriften, Nunito Sans für Text. */
    --mantine-font-family: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mantine-font-family-headings: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --mantine-heading-font-weight: 600;
}

/* Im Dunkelmodus bleibt das Orange, aber der Text muss hell bleiben —
   deshalb wird dort NICHT auf die dunklen Furbase-Töne umgestellt. */
:root[data-mantine-color-scheme='light'] {
    --mantine-color-text: var(--furbase-text);
    --mantine-color-anchor: var(--furbase-orange-dunkel);
}

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

body {
    font-family: var(--mantine-font-family);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.mantine-Title-root {
    font-family: var(--mantine-font-family-headings);
    letter-spacing: -0.01em;
}

/*
 * Überschriften im Artikel tragen das Dunkelblau der Marke. Im Dunkelmodus
 * wäre das unlesbar, deshalb nur im hellen Schema.
 */
:root[data-mantine-color-scheme='light'] .ProseMirror h1,
:root[data-mantine-color-scheme='light'] .ProseMirror h2,
:root[data-mantine-color-scheme='light'] .ProseMirror h3 {
    color: var(--furbase-blau);
}

/* Fliesstext im Artikel: etwas mehr Luft zwischen den Zeilen als Docmost
   vorgibt — die Seiten sind Anleitungen, keine Notizen. */
.ProseMirror p,
.ProseMirror li {
    line-height: 1.7;
}

/* ---------------------------------------------------------------- Feinschliff */

/* Verweise im Text sichtbar machen, ohne sie zu überzeichnen. */
.ProseMirror a {
    color: var(--furbase-orange-dunkel);
    text-decoration-color: rgba(255, 107, 67, 0.4);
    text-underline-offset: 2px;
}

.ProseMirror a:hover {
    text-decoration-color: var(--furbase-orange);
}

/*
 * Die Hinweiskästen sind das auffälligste Element der Wiki-Seiten. Docmost
 * malt sie flächig; ein Balken an der Kante ist ruhiger und trennt Warnung
 * von Tipp deutlicher.
 */
.ProseMirror div[data-type='callout'] {
    border-radius: 8px;
    border-left-width: 4px;
    border-left-style: solid;
}

.ProseMirror div[data-callout-type='info'] {
    border-left-color: var(--furbase-blau);
}

.ProseMirror div[data-callout-type='success'] {
    border-left-color: var(--furbase-gruen);
}

.ProseMirror div[data-callout-type='warning'],
.ProseMirror div[data-callout-type='danger'] {
    border-left-color: var(--furbase-orange);
}

/* Tabellen: Kopfzeile absetzen, damit lange Tabellen lesbar bleiben. */
:root[data-mantine-color-scheme='light'] .ProseMirror table th {
    background-color: #f6f7f9;
    color: var(--furbase-blau);
}

/*
 * Der aktive Eintrag in der Seitenleiste. Docmost hebt ihn grau hervor;
 * mit dem Markenton ist auf einen Blick klar, wo man steht.
 */
:root[data-mantine-color-scheme='light'] a[data-active='true'] {
    background-color: var(--furbase-orange-hell);
    color: var(--furbase-orange-dunkel);
}

/* Schaltflächen: gleiche Rundung wie in der App. */
.mantine-Button-root {
    border-radius: 8px;
    font-weight: 500;
}