/*
 * Lufox -- Design-Tokens (eine Quelle für Forum-Theme UND Leitstand).
 *
 * Herkunft: https://blackzack.dev, Datei /_next/static/css/e572ef80709d9de8.css (Stand 18.09.2026).
 * Die Werte sind 1:1 die dortigen Custom-Properties (:root hell, .dark dunkel) plus die Radien-,
 * Schatten- und Schriftfestlegungen, die die Seite als Tailwind-Utilities trägt (rounded-xl 35x,
 * rounded-md 24x, rounded-full 12x, rounded-lg 11x; shadow-code; tracking-[0.2em] für Kicker).
 *
 * Warum eine eigene Datei statt Werte in lufox.css: L3 bindet dieselbe Datei in leitstand/web/style.css
 * ein -- "Design passt zusammen" heißt gleiche Tokens, nicht gleiche Sitzung (LUFOX-PLAN E2).
 *
 * Hell/Dunkel: Diese Datei entscheidet NICHT selbst über das Schema. Sie liefert die helle Palette an
 * :root und die dunkle an `.dark` (NamelessMC setzt `class="dark"` auf <body>, blackzack.dev auf <html>)
 * sowie an `[data-theme="dunkel"]` (Leitstand). Eine prefers-color-scheme-Automatik gehört bewusst nicht
 * hierher: NamelessMC entscheidet serverseitig je Nutzer (night_mode), der Leitstand per JS -- eine
 * Medienabfrage hier würde beiden in die Quere kommen (helles Markup, dunkle Variablen).
 *
 * Schrift: Geist Sans/Mono (Vercel, SIL OFL 1.1) -- die @font-face-Deklarationen liegen beim Verbraucher,
 * weil der Pfad zu den .woff2 je Einbau anders ist (Theme: fonts/, Leitstand: eigener Ordner).
 */

:root {
    /* Flächen */
    --bg: #f4f4f7;                 /* Seitengrund */
    --bg-elevated: #ffffff;        /* Karten, Segmente, Navbar */
    --bg-elevated-2: #f7f7fa;      /* zweite Ebene: Kopfzeilen in Karten, Tabellenköpfe, Eingaben */

    /* Linien */
    --line: #1111161a;             /* Rahmen (10 % Schwarz) */
    --line-strong: #11111629;      /* Rahmen betont (16 %) */

    /* Text */
    --text: #17171c;
    --text-muted: #55555f;
    --text-faint: #83838f;

    /* Akzent */
    --accent: #6d4df2;             /* Violett -- Links, Primärknöpfe */
    --accent-2: #0891b2;           /* Cyan -- zweiter Akzent, Fokus */
    --accent-soft: #6d4df21f;      /* Akzent 12 % als Fläche (Chips, aktive Einträge) */
    --iris: linear-gradient(100deg, #6d4df2, #7c5cff 40%, #0ea5c4);  /* Verlauf für Primärknöpfe/Marke */

    /* Stimmung (blackzack.dev hat keine eigenen Statusfarben; dies sind die dort verwendeten Literale) */
    --ok: #66e777;
    --warn: #fdbf2d;
    --fehler: #fb5f57;
    --hinweis: #ea4aaa;

    /* Körnung (blackzack.dev legt ein Rausch-Bild über den Grund) */
    --grain-opacity: 0.025;

    /* Schrift */
    --schrift: "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-mono: "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
    --kicker-spationierung: 0.2em;   /* Kleinkapitel-Überschriften (tracking-[0.2em]) */
    --titel-spationierung: -0.02em;  /* große Titel (tracking-[-0.02em]) */

    /* Radien (Tailwind-Skala, so wie blackzack.dev sie nutzt) */
    --radius-sm: 0.375rem;   /* rounded-md: Chips, kleine Knöpfe, Eingaben */
    --radius: 0.5rem;        /* rounded-lg: Knöpfe, Dropdowns */
    --radius-lg: 0.75rem;    /* rounded-xl: Karten, Segmente (häufigster Wert) */
    --radius-xl: 1rem;       /* rounded-2xl: Hero-Kacheln */
    --radius-voll: 9999px;   /* rounded-full: Avatare, Pillen */

    /* Schatten */
    --schatten-sm: 0 1px 2px 0 #0000000d;
    --schatten: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --schatten-lg: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --schatten-akzent: 0 8px 24px -10px #7c5cff99;          /* Primärknopf */
    --schatten-akzent-gross: 0 30px 100px -12px #7c5cff2e;  /* "shadow-code": große Karten */

    /* Bewegung */
    --dauer: 0.3s;
    --kurve: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark,
[data-theme="dunkel"] {
    --bg: #0b0b0f;
    --bg-elevated: #101015;
    --bg-elevated-2: #15151c;
    --line: #ffffff14;
    --line-strong: #ffffff24;
    --text: #ececf2;
    --text-muted: #9a9aa7;
    --text-faint: #6a6a77;
    --accent: #a594ff;
    --accent-2: #22d3ee;
    --accent-soft: #7c5cff29;
    --iris: linear-gradient(100deg, #a594ff, #7c5cff 45%, #22d3ee);
    --grain-opacity: 0.04;
    --schatten-sm: 0 1px 2px 0 #00000059;
    --schatten: 0 1px 3px 0 #00000073, 0 1px 2px -1px #00000073;
    --schatten-lg: 0 20px 25px -5px #00000080, 0 8px 10px -6px #00000080;
    --schatten-akzent-gross: 0 30px 120px -12px #7c5cff38;
}