/* ==========================================================================
   Dunkler Modus der öffentlichen Seiten (Plan 6, Task 7)

   NUR FÜR layout_public.html.twig. Der angemeldete Bereich lädt diese Datei
   nicht und bleibt hell. Bausteine, die es nur hinter der Anmeldung gibt,
   stehen deshalb hier nicht.

   DIE WERTE KOMMEN AUS DER DUNKLEN WERKBANK-PALETTE von bc-tokens.css
   ([data-bc-variant="workbench"][data-theme="dark"]). bc-tokens.css bleibt
   die unveränderte Kopie aus dem Skill bright-color-design; die Ausprägung
   „Auftritt“ kennt dort nur hell (Entscheidung E9).

   ZWEI ARTEN VON FLÄCHEN. Bedienelemente auf Tinte (Knöpfe, Ziffern,
   Häkchen) kehren sich um: Tinte wird hell, Schrift darauf dunkel. Flächen,
   die Text tragen (Kopf, Fuss, Zahlkarte, Kopf der Webspace-Bestellseite),
   bleiben dunkel; dort werden die Rollen auf ihre helle Schrift
   zurückgesetzt.
   ========================================================================== */

:root[data-theme="dark"] {
    --bc-paper: #0b0b0c;
    --bc-paper-deep: #19191b;
    --bc-white: #141415;
    --bc-line: #2a2a2d;
    --bc-ink: #e6e4de;
    --bc-ink-quiet: #a3a097;
    --bc-on-ink: #111111;
    /* Schrift auf Pink bleibt weiß; --bc-on-buy zeigt sonst über --bc-white auf die dunkle Fläche. */
    --bc-on-buy: #ffffff;
    --bc-link: var(--bc-cyan);
    --bc-link-hover: var(--bc-yellow);
    --bc-focus: var(--bc-cyan);
    --bc-ok-text: var(--bc-lime);
    --bc-warn-text: var(--bc-yellow);
    --bc-bad-text: #ff5ca8;
    --bc-bad-tint: #2a1520;
    color-scheme: dark;
}

/* Flächen mit Text bleiben Onyx. Die Verweise des Fusses (Impressum,
   Datenschutz, AGB, Widerruf) lesen --bc-paper-deep und brauchen dort den
   hellen Ton. */
:root[data-theme="dark"] .bc-kopf,
:root[data-theme="dark"] .bc-fuss,
:root[data-theme="dark"] .bc-zahlkarte,
:root[data-theme="dark"] .bc-ws-kopf {
    --bc-ink: #070708;
    --bc-on-ink: #ffffff;
    --bc-on-ink-quiet: #b3aea3;
    --bc-on-ink-soft: #c6c2b7;
    --bc-on-ink-line: #4a453d;
    --bc-paper-deep: #e3e0d8;
    --bc-white: #ffffff;
}

/* Flächen mit eigenem Grund setzen die Rollen in panel.css zurück: Verweise
   in Violett, Schrift auf Pink in --bc-white. Im Dunkeln gelten dort Cyan,
   Gelb und Weiß. */
:root[data-theme="dark"] .bc-karte,
:root[data-theme="dark"] .bc-paket,
:root[data-theme="dark"] .bc-meldung,
:root[data-theme="dark"] .bc-tabelle-rahmen,
:root[data-theme="dark"] .bc-wahlkarte,
:root[data-theme="dark"] .bc-vertrag,
:root[data-theme="dark"] .bc-zettel,
:root[data-theme="dark"] .bc-zugang-karte {
    --bc-link: var(--bc-cyan);
    --bc-link-hover: var(--bc-yellow);
    --bc-on-buy: #ffffff;
}

/* Die Erfolgsmeldung liegt auf Limette (die Kündigungsseite ist öffentlich).
   Alles darin liest dunkel: der Text über `color`, der Umrissknopf über
   --bc-text-loud, Verweise über --bc-link. Zwei Klassen im Selektor, damit
   die Regel der Kartenflächen darüber nicht gewinnt. */
:root[data-theme="dark"] .bc-meldung.bc-meldung--gut {
    --bc-ink: #111111;
    --bc-ink-quiet: #4a4a4a;
    --bc-text: #111111;
    --bc-text-loud: #111111;
    --bc-text-quiet: #4a4a4a;
    --bc-link: #111111;
    --bc-link-hover: #111111;
    --bc-focus: #111111;
    --bc-signal: #111111;
    color: #111111;
}

/* Der Wählen-Knopf der Tarifseite (Stil auf der Seite) liest --bc-white. */
:root[data-theme="dark"] .bc-waehlen,
:root[data-theme="dark"] .bc-waehlen:hover {
    color: #ffffff;
}

/* Das Band bleibt Cyan; seine Schrift ist dort schon Tiefe (.bc-band).
   Quadrat, Fokus und Hover des Bandes lesen --bc-ink und bekommen Tinte. */
:root[data-theme="dark"] .bc-band {
    --bc-ink: #111111;
}

/* Flächen in Gelb und Limette tragen dunkle Schrift. In panel.css steht dort
   `color: var(--bc-ink)`; im dunklen Modus ist Tinte hell, deshalb kehren
   diese Flächen die Rolle für sich zurück. Die Variablen von Bootstrap sind
   an der Wurzel aufgelöst und kommen darum einzeln dazu. */
:root[data-theme="dark"] .bc-ende,
:root[data-theme="dark"] .alert-success,
:root[data-theme="dark"] .alert-warning,
:root[data-theme="dark"] .bc-sprung {
    --bc-ink: #111111;
    --bc-ink-quiet: #4a4a4a;
    --bs-body-color: #111111;
    --bs-heading-color: #111111;
    --bs-emphasis-color: #111111;
    color: #111111;
}

:root[data-theme="dark"] .bc-ws-marke,
:root[data-theme="dark"] .bc-ws-foto--zeichen,
:root[data-theme="dark"] .bc-ws-schritte li::before,
:root[data-theme="dark"] .bc-recht-text h2:target,
:root[data-theme="dark"] ::selection {
    color: #111111;
}

/* Die Tönung dieser Flächen liegt auf dunklem Grund; die Schrift darauf ist hell. */
:root[data-theme="dark"] .bc-ws-hilfe,
:root[data-theme="dark"] .bc-cap[data-zustand="laeuft"] .bc-cap-meldung {
    color: var(--bc-ink);
}

/* Bootstrap-Felder des Themes: Hintergrund und Rand aus den Rollen. Der Rand
   nimmt den Feldton der dunklen Palette, damit das Feld sichtbar bleibt. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--bc-white);
    border-color: #6e6e74;
    color: var(--bc-ink);
}

/* Das Kästchen von Cap bekommt denselben Feldton; die Zustände Cyan und
   Limette stehen danach noch einmal, damit sie gewinnen. */
:root[data-theme="dark"] .bc-cap {
    --cap-checkbox-border: var(--bc-edge-width) solid #6e6e74;
}
:root[data-theme="dark"] .bc-cap[data-zustand="laeuft"] {
    --cap-checkbox-border: var(--bc-edge-width) solid var(--bc-cyan);
}
:root[data-theme="dark"] .bc-cap[data-zustand="geprueft"] {
    --cap-checkbox-border: var(--bc-edge-width) solid var(--bc-lime);
}

/* Der Schalter: Spur und Knopf heben sich vom Grund ab. Eingeschaltet bleibt
   die Spur Limette und der Knopf dunkel. */
:root[data-theme="dark"] .bc-schalter-spur {
    background: #3a3a3f;
}
:root[data-theme="dark"] .bc-schalter-spur::after {
    background: #d9d6ce;
}
:root[data-theme="dark"] .bc-schalter input:checked + .bc-schalter-spur {
    background: var(--bc-lime);
}
:root[data-theme="dark"] .bc-schalter input:checked + .bc-schalter-spur::after {
    background: #111111;
}

/* Der Umschalter im Kopf. Ohne Skript bleibt er verborgen (Attribut hidden). */
.bc-hell-dunkel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--bc-on-ink-line);
    background: transparent;
    color: var(--bc-on-ink);
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
}
.bc-hell-dunkel[hidden] { display: none; }
.bc-hell-dunkel:hover,
.bc-hell-dunkel[aria-pressed="true"] { color: var(--bc-yellow); border-color: var(--bc-yellow); }