/*!
 * Fileshare — Copyright 2026 Sebastian Peuser
 * PolyForm Noncommercial License 1.0.0
 * https://polyformproject.org/licenses/noncommercial/1.0.0
 */

/** ----------------------------------------------------------------------------
 * TYPOGRAPHIE
 *
 * Globale Stile für die semantischen Elemente. Diese Stile werden automatisch
 * auch in dem Redactor-Feld geladen.
*/

/* calibre-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Stockwerk2';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/calibreWeb/CalibreWeb-Light.eot'); /* IE9 Compat Modes */
    src: url('/fonts/calibreWeb/CalibreWeb-Light.woff') format('woff'), /* Modern Browsers */
}

/* calibre-bold - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Stockwerk2';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/calibreWeb/CalibreWeb-Medium.eot'); /* IE9 Compat Modes */
    src: url('/fonts/calibreWeb/CalibreWeb-Medium.woff') format('woff'), /* Modern Browsers */
}

/* calibre-thin - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Stockwerk2';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/calibreWeb/CalibreWeb-Thin.eot'); /* IE9 Compat Modes */
    src: url('/fonts/calibreWeb/CalibreWeb-Thin.woff') format('woff'), /* Modern Browsers */
}

/*
 * tokens.stockwerk2.css — Farbvariante "Stockwerk2", abgeleitet aus der
 * öffentlichen main.css von stockwerk2.de.
 *
 * Austauschbarkeit: Diese Datei ersetzt GENAU den :root-, .dark- und
 * @theme-Farbblock der Default-tokens.css 1:1 (siehe dortige Kopfzeilen-
 * Doku). Alles andere (Templates, @theme-inline-Verdrahtung) bleibt gleich.
 *
 * WOHER DIE WERTE STAMMEN:
 * - Direkt aus main.css übernommen (echte Fundstellen): Markenfarbe
 *   #de2356, Fließtext #0f0f0f, Flächen #f4f5f8/#ededed/#cecece, Rahmen
 *   #e0e1e4 (~15% Ink-Deckkraft, passt zur bestehenden Ableitungsformel),
 *   Erfolgs-Alert (Text #03543e / Rahmen #84e1bc / Fläche #f3faf7),
 *   Fehler-Alert (Text #9b1c1c / Rahmen #f8b4b4 / Fläche #fdf2f2),
 *   Eingabefeld-Hintergrund #eee, Fokus-Unterstrich = Markenfarbe,
 *   Dialog-Overlay #00000080 (deckt sich mit dem bestehenden Wert).
 * - EIGENE ABLEITUNG, weil auf stockwerk2.de nicht vorhanden:
 *   1) Warnung & Info: Es gibt dort keine Warn-/Info-Alerts. Die Töne
 *      sind aus den vorhandenen CTA-Akzentfarben übernommen (Gelb
 *      #f6b54e → Warnung, Blau #42539b → Info) und für AA-Kontrast mit
 *      weißer Schrift nachjustiert (Helligkeit gesenkt, Farbton erhalten).
 *   2) Kompletter Dark Mode: stockwerk2.de hat keinen Dark Mode. Die
 *      .dark-Werte sind nach dem gleichen Muster wie in der Default-Datei
 *      extrapoliert (Flächen/Ink invertiert, Status-Töne aufgehellt) und
 *      vor Verwendung gegenzuprüfen.
 *   3) brand-600/700 (Hover/Active): keine Hover-Farbwerte im CSS
 *      auffindbar (nur :hover-Transitions ohne Farbwechsel) — eigene,
 *      plausible Helligkeitsstufen der Markenfarbe.
 *
 * SCHRIFT — WICHTIGER HINWEIS:
 * "Stockwerk2" ist dort nur der intern vergebene font-family-Name; die
 * tatsächliche Schrift ist Calibre (Dateien CalibreWeb-Thin/Light/Medium),
 * ein kommerzielles Foundry-Font (Klim Type Foundry). Es sind NUR die
 * Schnitte 300/400/600 selbst gehostet — kein 700. Das Original-CSS setzt
 * an mehreren Stellen trotzdem font-weight:700 (Links, Listen), der
 * Browser faked dort also Fett. Für dieses Projekt braucht ihr eigene,
 * lizenzierte CalibreWeb-Dateien plus einen passenden @font-face-Block in
 * eurer fonts.css — die Web-Font-Dateien selbst liegen nicht bei und
 * wurden hier nicht kopiert (Lizenz).
 */

@theme {
    /* Schrift. @font-face-Deklarationen kommen wie gehabt aus fonts.css. */
    --font-sans: 'Stockwerk2', 'Calibre', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Stockwerk2', 'Calibre', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    /* main.css nutzt für Code/Mono einen eigenen, echten Systemstack (kein Calibre-Override) — 1:1 übernommen. */
    --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    /*
     | Typo-Skala unverändert gegenüber der Default-Datei: Basis 20px /
     | line-height 1.5 entspricht bereits exakt dem body{}-Wert von
     | stockwerk2.de (Zufall, aber praktisch — kein Anpassungsbedarf).
     */
    --text-xs:   0.9375rem;   /* 15px  */  --text-xs--line-height:   1.4;
    --text-sm:   1.09375rem;  /* 17.5px*/  --text-sm--line-height:   1.45;
    --text-base: 1.25rem;     /* 20px  */  --text-base--line-height: 1.5;
    --text-lg:   1.40625rem;  /* 22.5px*/  --text-lg--line-height:   1.5;
    --text-xl:   1.5625rem;   /* 25px  */  --text-xl--line-height:   1.4;
    --text-2xl:  1.875rem;    /* 30px  */  --text-2xl--line-height:  1.3;
    --text-3xl:  2.34375rem;  /* 37.5px*/  --text-3xl--line-height:  1.2;
    --text-4xl:  2.8125rem;   /* 45px  */  --text-4xl--line-height:  1.15;
    --text-5xl:  3.75rem;     /* 60px  */  --text-5xl--line-height:  1.05;

    /* Radien unverändert (nicht Teil dieses Farb-/Schrift-Abgleichs; stockwerk2.de nutzt an Buttons zusätzlich einen Voll-Pill-Radius, s. Hinweis unten). */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    /*
     | Status-/Interaktionsfarben — moduskonstant. Fehler & Erfolg sind
     | echte, aus den Alert-Klassen von stockwerk2.de übernommene Töne;
     | Warnung & Info sind aus den CTA-Akzentfarben abgeleitet (s. o.).
     */
    --color-danger:      oklch(0.448 0.162 26.8);   /* #9b1c1c – echter Fehler-Alert-Ton */
    --color-on-danger:   oklch(1 0 0);
    --color-success:     oklch(0.396 0.079 167.5);  /* #03543e – echter Erfolgs-Alert-Ton */
    --color-on-success:  oklch(1 0 0);
    --color-warning:     oklch(0.58 0.15 75.8);     /* abgeleitet aus CTA-Gelb #f6b54e, abgedunkelt für AA mit weißer Schrift */
    --color-on-warning:  oklch(1 0 0);
    --color-info:        oklch(0.465 0.118 271.2);  /* #42539b – CTA-/Zitat-Blau */
    --color-on-info:     oklch(1 0 0);

    /*
     | Formular-Eingabefelder — moduskonstant, wie im Original-Konzept,
     | aber mit den echten Werten von stockwerk2.de: dort ist der
     | Feld-Hintergrund ein helles Grau (kein Weiß) und ohne sichtbaren
     | Rahmen; die Fokus-Rückmeldung erfolgt über eine Unterstreichung in
     | der Markenfarbe (siehe --c-focus-ring unten).
     */
    --color-field:        oklch(0.949 0 89.9);   /* #eeeeee */
    --color-field-ink:    oklch(0.168 0 89.9);   /* #0f0f0f — Text (dient hier zugleich als Rahmen-Ersatz) */
    --color-field-muted:  oklch(0.590 0 89.9);   /* #7d7d7d — Placeholder */

    /* Overlay-Vordergrund unverändert — deckt sich mit dem realen Dialog-Overlay. */
    --color-on-overlay:      oklch(1 0 0);
    --color-on-overlay-ink:  oklch(0 0 0);
}

/*
 | FARB-ROHWERTE — Stockwerk2-Theme. Hell = Default (entspricht 1:1
 | stockwerk2.de). Dunkel = eigene, konsistente Extrapolation (s. o.).
 */
:root {

    /* Schrift. @font-face-Deklarationen kommen wie gehabt aus fonts.css. */
    --font-sans: 'Stockwerk2', 'Calibre', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Stockwerk2', 'Calibre', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    /* main.css nutzt für Code/Mono einen eigenen, echten Systemstack (kein Calibre-Override) — 1:1 übernommen. */
    --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

    --c-surface-50:  oklch(1 0 0);               /* #ffffff — Seitenhintergrund, wie im Original */
    --c-surface-100: oklch(0.970 0.004 271.4);   /* #f4f5f8 — z. B. c-projectnav-Hintergrund */
    --c-surface-200: oklch(0.946 0 89.9);        /* #ededed — z. B. Video-Platzhalter-Fläche */
    --c-surface-300: oklch(0.851 0 89.9);        /* #cecece — z. B. Logowall-Item-Fläche */

    --c-ink:         oklch(0.168 0 89.9);        /* #0f0f0f — echte Fließtextfarbe (bewusst kein reines Schwarz) */
    --c-ink-muted:   oklch(0.590 0 89.9);        /* #7d7d7d */
    --c-border:      oklch(0.168 0 89.9 / 0.15); /* aus Ink abgeleitet — deckt sich mit dem realen Rahmenton #e0e1e4 */

    --c-brand:       oklch(0.586 0.217 13.1);    /* #de2356 — Stockwerk2-Markenfarbe */
    --c-brand-600:   oklch(0.52 0.20 13.1);      /* Hover — etwas dunkler (eigene Ableitung) */
    --c-brand-700:   oklch(0.44 0.18 13.1);      /* Active/Pressed — noch dunkler (eigene Ableitung) */
    --c-on-brand:    oklch(1 0 0);               /* #ffffff — Text auf Markenfarbe, wie im echten c-btn */

    --c-focus-ring:  oklch(0.586 0.217 13.1);    /* = Markenfarbe, wie beim echten Fokus-Unterstrich */

    --c-danger-ink:  var(--color-danger);
    --c-success-ink: var(--color-success);
    --c-warning-ink: var(--color-warning);
    --c-info-ink:    var(--color-info);

    --c-overlay:     oklch(0 0 0 / 0.5);         /* deckt sich mit dem realen Dialog-Overlay #00000080 */
    --c-track:       oklch(0 0 0 / 0.1);
    --c-ink-subtle:  oklch(0 0 0 / 0.3);
    --c-chrome:      oklch(1 0 0 / 0.75);
}

/* Eigene Extrapolation — auf stockwerk2.de gibt es keinen Dark Mode, vor Einsatz gegenprüfen. */
.dark {
    --c-surface-50:  oklch(0.168 0 89.9);        /* wiederverwendetes "weiches Schwarz" #0f0f0f statt reinem #000 */
    --c-surface-100: oklch(0.22 0 89.9);
    --c-surface-200: oklch(0.28 0 89.9);
    --c-surface-300: oklch(0.35 0 89.9);

    --c-ink:         oklch(1 0 0);
    --c-ink-muted:   oklch(0.72 0 89.9);
    --c-border:      oklch(1 0 0 / 0.2);

    --c-brand:       oklch(0.586 0.217 13.1);    /* Markenfarbe bleibt bewusst gleich (kein Wechsel wie im monochromen Original) */
    --c-brand-600:   oklch(0.65 0.20 13.1);      /* im Dunkeln heller statt dunkler */
    --c-brand-700:   oklch(0.72 0.18 13.1);
    --c-on-brand:    oklch(1 0 0);               /* bleibt Weiß — wie beim echten Button, unabhängig vom Modus */

    --c-focus-ring:  oklch(0.586 0.217 13.1);

    /* Aufgehellte Status-Vordergründe. Erfolg/Warnung nutzen sogar echte, auf der Seite vorkommende hellere Töne (Alert-Rahmen bzw. CTA-Gelb). */
    --c-danger-ink:  oklch(0.75 0.16 26.8);      /* aufgehellt, gleicher Farbton wie #9b1c1c */
    --c-success-ink: oklch(0.841 0.104 166.4);   /* = #84e1bc, echter Alert-Rahmenton */
    --c-warning-ink: oklch(0.815 0.139 75.8);    /* = #f6b54e, echtes CTA-Gelb */
    --c-info-ink:    oklch(0.80 0.10 271.2);     /* aufgehellt, gleicher Farbton wie #42539b */

    --c-overlay:     oklch(0 0 0 / 0.7);
    --c-track:       oklch(1 0 0 / 0.15);
    --c-ink-subtle:  oklch(1 0 0 / 0.35);
    --c-chrome:      oklch(0 0 0 / 0.75);
}

/*
 | Verknüpfung mit Tailwinds Farbnamen — unverändert gegenüber der
 | Default-Datei, da nur die Rohwerte oben ausgetauscht werden.
 */
@theme inline {
    --color-surface-50:  var(--c-surface-50);
    --color-surface-100: var(--c-surface-100);
    --color-surface-200: var(--c-surface-200);
    --color-surface-300: var(--c-surface-300);

    --color-ink:         var(--c-ink);
    --color-ink-muted:   var(--c-ink-muted);
    --color-border:      var(--c-border);

    --color-brand:       var(--c-brand);
    --color-brand-600:   var(--c-brand-600);
    --color-brand-700:   var(--c-brand-700);
    --color-on-brand:    var(--c-on-brand);

    --color-focus-ring:  var(--c-focus-ring);

    --color-danger-ink:  var(--c-danger-ink);
    --color-success-ink: var(--c-success-ink);
    --color-warning-ink: var(--c-warning-ink);
    --color-info-ink:    var(--c-info-ink);

    --color-danger-surface:  color-mix(in oklab, var(--c-danger-ink)  12%, transparent);
    --color-success-surface: color-mix(in oklab, var(--c-success-ink) 12%, transparent);
    --color-warning-surface: color-mix(in oklab, var(--c-warning-ink) 12%, transparent);
    --color-info-surface:    color-mix(in oklab, var(--c-info-ink)    12%, transparent);

    --color-danger-line:  color-mix(in oklab, var(--c-danger-ink)  30%, transparent);
    --color-success-line: color-mix(in oklab, var(--c-success-ink) 30%, transparent);
    --color-warning-line: color-mix(in oklab, var(--c-warning-ink) 30%, transparent);
    --color-info-line:    color-mix(in oklab, var(--c-info-ink)    30%, transparent);

    --color-overlay:     var(--c-overlay);
    --color-track:       var(--c-track);
    --color-ink-subtle:  var(--c-ink-subtle);
    --color-chrome:      var(--c-chrome);
}