/* Thema "Papier und Werkstatt".
 *
 * Ein mitgeliefertes Beispiel, kein Vorgabewert. Eine Instanz bindet es ein
 * (`theme_pfad="/kern/themen/papier.css"`), kopiert es als Ausgangspunkt in
 * ihr eigenes Repo oder ignoriert es. Verändert wird es hier nie im Namen
 * einer einzelnen Instanz - dann wäre es kein Beispiel mehr.
 *
 * Richtung: heller, leicht warmer Grund wie Papier, eine einzige tiefe Farbe
 * für alles Handelnde, Serife im Fließtext und eine schmale Monospace für
 * Etiketten. Der Kontrast entsteht aus Größe und Rhythmus, nicht aus vielen
 * Farben. Kanten statt Rundungen.
 *
 * Übernommen aus der Oberfläche von SysSchnee, wo diese Richtung entstanden
 * ist. Der Unterschied: dort standen 27 eigene Variablennamen (--grund,
 * --tinte, --akzent), die mit dem Fundament nichts zu tun hatten. Hier steht
 * dieselbe Gestaltung als Token-WERTE - damit färbt sie jedes Modul mit, das
 * es je geben wird, statt nur die Flächen, die jemand von Hand nachgezogen
 * hat.
 *
 * Was man ohne dieses Wissen falsch macht: nur `:root` setzen. Dann steht im
 * Dunkelmodus wieder die Leitfarbe des Fundaments, weil token.css sie in
 * zwei weiteren Blöcken erneut setzt. Ein Thema bedient deshalb IMMER alle
 * drei: hell, Systemwunsch dunkel und ausdrücklich dunkel.
 */

:root {
    /* ---------- Leitfarbe ----------
       Ein tiefes Tintenblau. Gemessen auf dem Grund dieses Themas: 10,19:1,
       weiß darauf 10,72:1. */
    --lk-primaer: #1e3f66;
    --lk-primaer-rgb: 30, 63, 102;
    /* Was AUF der Leitfarbe steht. Gehört untrennbar zu ihr - wer die
       Fläche wechselt und die Schrift darauf vergisst, bekommt die des
       Fundaments, und die ist auf dessen Grün abgestimmt. Im Dunkelmodus
       ist das ein Grünschwarz, sichtbar auf jedem Hauptknopf. Gemessen:
       10,72:1. */
    --lk-auf-farbe: #ffffff;
    --lk-auf-farbe-leise: #dbe4ef;

    /* Der Zustand "Information". Ohne ihn steht das Blau des Fundaments
       (#1565c0) neben dem Themen-Blau - zwei Blaus, die sich nicht
       unterscheiden wollen und es trotzdem tun. */
    --lk-info: #33608f;
    --lk-info-rgb: 51, 96, 143;
    --lk-info-flaeche: #eef2f7;

    /* ---------- Flächen ----------
       Warm statt neutral: der Grund hat einen Gelbanteil, die Karte bleibt
       reinweiß. Erst dieser kleine Unterschied lässt eine Karte als Blatt
       auf einem Tisch erscheinen, ohne dass es dafür einen Rahmen braucht. */
    --lk-grund: #faf9f7;
    --lk-grund-satt: #f0eeea;
    --lk-mischgrund: #ffffff;
    /* Karte und eingesenkter Bereich gehören zum Flächensatz und müssen
       mitgesetzt werden. Das Fundament trägt hier eigene Werte, die zu
       SEINER Leitfarbe passen - im Dunkelmodus deutlich sichtbar, dort ist
       die Kartenfläche grünstichig. Wer nur den Grund setzt, bekommt
       Karten aus einer fremden Farbfamilie. */
    --lk-flaeche: #ffffff;
    --lk-flaeche-leise: #f4f2ee;

    /* ---------- Schrift ----------
       Gemessen: 17,06:1 / 7,57:1 / 3,17:1. Der schwache Ton bleibt bewusst
       unter 4,5:1 - er ist nur für Platzhalter und leere Zustände. */
    --lk-text: #14171d;
    --lk-text-leise: #4a5160;
    --lk-text-schwach: #858d9c;
    --lk-linie: #dcd9d2;
    --lk-linie-fein: rgba(20, 23, 29, .07);

    /* Serife im Fließtext, Grotesk in den Überschriften. Ohne das eigene
       Token für die Titelschrift ginge diese Trennung nicht - ein Thema
       müsste dafür eigene Selektoren schreiben und hinge damit an der
       Markup-Ordnung des Pakets. */
    --lk-schrift: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    --lk-schrift-titel: system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lk-schrift-fest: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

    /* ---------- Form ----------
       Der sichtbarste Unterschied zum Vorgabe-Aussehen: fast kantig statt
       rund. Papier hat keine Radien. */
    --lk-radius: 6px;
    --lk-radius-klein: 3px;
    /* Auch die Pillen. Ohne diese Zeile standen 999-Pixel-Umschalter neben
       3-Pixel-Ecken, und die Datei hielt ihr eigenes Versprechen nicht. */
    --lk-radius-rund: 8px;

    /* Zwei Schatten übereinander: ein harter Ansatz und ein weiter,
       schwacher Abfall. Ein einzelner Schatten wirkt entweder aufgeklebt
       oder gar nicht. */
    --lk-schatten-1: 0 1px 2px rgba(20, 23, 29, .05);
    --lk-schatten-2: 0 1px 2px rgba(20, 23, 29, .05), 0 8px 24px rgba(20, 23, 29, .07);
    --lk-schatten-3: 0 2px 4px rgba(20, 23, 29, .06), 0 20px 50px rgba(20, 23, 29, .13);

    /* ---------- Meldungen ----------
       Gedeckte Erdtöne statt Signalfarben, damit sie neben dem Tintenblau
       nicht schreien. Gemessen: 7,74:1 und 6,79:1. */
    --lk-fehler: #8a3324;
    --lk-fehler-rgb: 138, 51, 36;
    --lk-fehler-dunkel: #6d2819;
    --lk-fehler-flaeche: #fbf3f1;
    --lk-erfolg: #2c6244;
    /* Dieselbe Farbe in Kanälen. Sie gehört zu --lk-erfolg und darf nie
       ohne sie stehenbleiben: die Ampel färbt Fläche und Punkt aus dem
       einen Token, den Rand aus diesem. Fehlt es, ist der Rand grün aus
       dem Fundament und der Rest blaugrün aus dem Thema. */
    --lk-erfolg-rgb: 44, 98, 68;
    --lk-erfolg-flaeche: #eef4f0;
    --lk-warnung: #8a5a10;
    --lk-warnung-rgb: 138, 90, 16;
    --lk-warnung-flaeche: #fdf8ec;
    /* ---------- Akzente ----------
       Vier Signalfarben für Marken und Kategorien, gedeckt gehalten wie der
       Rest. Sie stehen hier, weil sie im Modul-CSS in Gebrauch sind - ohne
       sie leuchten dort vier Farben aus dem Vorgabe-Aussehen ins Papier. */
    --lk-cyan: #1f6b74;
    --lk-cyan-flaeche: #eff5f6;
    --lk-violett: #5f3c7a;
    --lk-violett-flaeche: #f4f0f8;
    --lk-rosa: #8a2f52;
    --lk-rosa-flaeche: #fbf0f4;
    --lk-bernstein: #8a5a10;
    --lk-bernstein-flaeche: #fdf8ec;

    /* Codeflächen und der Schleier hinter einem Dialog. Beides gehört zum
       Aussehen, beides blieb sonst im Blaugrau des Fundaments stehen. */
    --lk-code-grund: #1c2028;
    --lk-code-text: #dfe3ea;
    --lk-schleier: rgba(20, 23, 29, .5);
}

/* Systemwunsch dunkel, solange die Instanz nicht ausdrücklich hell will. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* #1e3f66 liegt auf dunklem Grund bei 1,3:1 und ist als Schrift
           unlesbar. Auch das aufgehellte #3a6ea5 der Vorlage reicht mit
           3,28:1 nicht. Gemessen und gewählt: 6,03:1. */
        --lk-primaer: #6c9bd2;
        --lk-primaer-rgb: 108, 155, 210;
        /* Dunkler Text auf hellem Blau, gemessen 6,05:1. Weiß läge hier
           bei 2,89:1 und wäre unbrauchbar. */
        --lk-auf-farbe: #121a24;
        --lk-auf-farbe-leise: #2b3a4d;

        --lk-info: #8fb4dd;
        --lk-info-rgb: 143, 180, 221;
        --lk-info-flaeche: #1b2733;

        --lk-grund: #171a1f;
        --lk-grund-satt: #12151a;
        --lk-mischgrund: #1e222a;
        --lk-flaeche: #1e222a;
        --lk-flaeche-leise: #191d24;

        --lk-text: #e7e9ee;
        --lk-text-leise: #a8b0bd;
        --lk-text-schwach: #6f7886;
        --lk-linie: #2e3440;
        --lk-linie-fein: rgba(231, 233, 238, .10);

        /* Auf dunklem Grund trägt kein Schatten. Die Tiefe kommt aus der
           helleren Kartenfläche, sonst steht ein schwarzer Fleck auf
           Schwarz. */
        --lk-schatten-1: none;
        --lk-schatten-2: 0 1px 0 rgba(231, 233, 238, .05);
        --lk-schatten-3: 0 20px 50px rgba(0, 0, 0, .5);

        --lk-fehler: #e3897a;
        --lk-fehler-rgb: 227, 137, 122;
        --lk-fehler-dunkel: #edaa9e;
        --lk-fehler-flaeche: #2a1c19;
        --lk-erfolg: #7cbb97;
        --lk-erfolg-rgb: 124, 187, 151;
        --lk-erfolg-flaeche: #17241d;
        --lk-warnung: #d8a75a;
        --lk-warnung-rgb: 216, 167, 90;
        --lk-warnung-flaeche: #251e12;
        --lk-cyan: #6fb5bd;
        --lk-cyan-flaeche: #142325;
        --lk-violett: #b18bd0;
        --lk-violett-flaeche: #201a28;
        --lk-rosa: #dd8fab;
        --lk-rosa-flaeche: #281920;
        --lk-bernstein: #d8a75a;
        --lk-bernstein-flaeche: #251e12;

        --lk-code-grund: #12161c;
        --lk-code-text: #dfe3ea;
        --lk-schleier: rgba(6, 8, 11, .66);
    }
}

/* Ausdrücklich dunkel gewählt. Wörtlich dieselben Werte - der Block ist
   nicht zusammenlegbar, weil der eine an eine Medienabfrage gebunden ist
   und der andere an ein Attribut. */
:root[data-theme="dark"] {
    --lk-primaer: #6c9bd2;
    --lk-primaer-rgb: 108, 155, 210;
    --lk-auf-farbe: #121a24;
    --lk-auf-farbe-leise: #2b3a4d;

    --lk-info: #8fb4dd;
    --lk-info-rgb: 143, 180, 221;
    --lk-info-flaeche: #1b2733;

    --lk-grund: #171a1f;
    --lk-grund-satt: #12151a;
    --lk-mischgrund: #1e222a;
    --lk-flaeche: #1e222a;
    --lk-flaeche-leise: #191d24;

    --lk-text: #e7e9ee;
    --lk-text-leise: #a8b0bd;
    --lk-text-schwach: #6f7886;
    --lk-linie: #2e3440;
    --lk-linie-fein: rgba(231, 233, 238, .10);

    --lk-schatten-1: none;
    --lk-schatten-2: 0 1px 0 rgba(231, 233, 238, .05);
    --lk-schatten-3: 0 20px 50px rgba(0, 0, 0, .5);

    --lk-fehler: #e3897a;
    --lk-fehler-rgb: 227, 137, 122;
    --lk-fehler-dunkel: #edaa9e;
    --lk-fehler-flaeche: #2a1c19;
    --lk-erfolg: #7cbb97;
    --lk-erfolg-rgb: 124, 187, 151;
    --lk-erfolg-flaeche: #17241d;
    --lk-warnung: #d8a75a;
    --lk-warnung-rgb: 216, 167, 90;
    --lk-warnung-flaeche: #251e12;
    --lk-cyan: #6fb5bd;
    --lk-cyan-flaeche: #142325;
    --lk-violett: #b18bd0;
    --lk-violett-flaeche: #201a28;
    --lk-rosa: #dd8fab;
    --lk-rosa-flaeche: #281920;
    --lk-bernstein: #d8a75a;
    --lk-bernstein-flaeche: #251e12;

    --lk-code-grund: #12161c;
    --lk-code-text: #dfe3ea;
    --lk-schleier: rgba(6, 8, 11, .66);
}