/**
 * Design-Tokens, die mehr als ein Block braucht.
 *
 * Registriert als Style-Handle "dhaw-tokens" in
 * includes/class-register-blocks.php. "dhaw-container" hängt davon ab, ein
 * Block bekommt die Tokens also automatisch mit, sobald er die Inhaltsspalte
 * einbindet; sonst über "style": [ "dhaw-tokens", … ] in seiner block.json.
 *
 * Eckenradien
 * -----------
 * 10px ist der Radius der Website: universal.css gibt ihn den Buttons
 * (.wp-block-button__link), und hero, tabs, teaser-linked, text-image-card und
 * abschluss-cta setzen denselben Wert. Neue Bausteine nehmen --dhaw-radius,
 * statt sich einen eigenen Wert auszudenken.
 *
 * Glasfläche
 * ----------
 * Ein halbtransparentes Band, das über einem Foto steht und den Hintergrund
 * weichzeichnet — Hero-Panel und Bild-CTA-Band. Es gibt genau eine solche
 * Fläche auf der Website: dieselbe Deckkraft, dieselbe Weichzeichnung,
 * dieselbe Kante, derselbe Schatten. Wer eine neue Glasfläche baut, nimmt
 * diese Tokens; wer den Effekt ändern will, ändert sie hier — dann ändern
 * sich alle mit.
 *
 * Dunkles Glas heißt weiße Schrift. Ein Block, der die Fläche einbindet, muss
 * seine Textfarbe darauf abstimmen (siehe --gu-hero-ink / --dhaw-bild-cta-ink).
 *
 * Drei Zustände, alle drei sind Pflicht:
 *
 *   1. Normalfall   --dhaw-glass-bg + backdrop-filter
 *   2. @supports not (backdrop-filter)  → --dhaw-glass-bg-fallback
 *      Ohne Weichzeichnung muss die Fläche selbst deckender sein.
 *   3. @media (prefers-reduced-transparency: reduce) → --dhaw-glass-bg-solid
 *      und backdrop-filter: none.
 */

:root {
    /* Karten, Bänder, Bildrahmen, Buttons — der Normalfall. */
    --dhaw-radius: 10px;
    /* Kleinteiliges: Chips, Badges, Eingabefelder. */
    --dhaw-radius-sm: 6px;
    /* Alles Runde: Icon-Kreise, Pfeil-Buttons. */
    --dhaw-radius-pill: 999px;

    /* Glasfläche über einem Foto — Deckkraft und Kantenhelligkeit. */
    --dhaw-glass-bg: rgba(26, 26, 26, 0.32);
    --dhaw-glass-border: rgba(255, 255, 255, 0.18);
    /* Weichzeichnung des Fotos dahinter; die Sättigung hebt die Farben an,
       die das Blurren sonst ausbleichen würde. */
    --dhaw-glass-blur: 16px;
    --dhaw-glass-saturate: 120%;
    /* Der Schlagschatten trennt die Fläche vom Foto, der innere helle Strich
       zeichnet die Oberkante nach wie bei einer Glasscheibe. */
    --dhaw-glass-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    /* Ohne backdrop-filter (ältere Browser): deckender, damit der Text
       lesbar bleibt. */
    --dhaw-glass-bg-fallback: rgba(26, 26, 26, 0.6);
    /* Bei reduzierter Transparenz: ruhige, fast deckende Fläche. */
    --dhaw-glass-bg-solid: rgba(26, 26, 26, 0.85);

    /* ------------------------------------------------------------------
       Farbpalette
       ------------------------------------------------------------------
       Die verbindliche Liste. Ein neuer Block nimmt diese Tokens und
       definiert keine eigenen Hex-Werte mehr — und wer sie benutzt, muss
       "dhaw-tokens" (oder "dhaw-container", das davon abhaengt) in seiner
       block.json unter "style" fuehren, sonst ist die Datei auf der Seite
       nicht geladen und var() faellt aus.

       Kontrastwerte gegen Weiß, sofern nicht anders vermerkt.
       ------------------------------------------------------------------ */

    /* Dunkelrot der Marke. Überschriften, Buttons, dunkle Flächen.
       Global auch die Farbe von h1–h6. 10,6:1. */
    --dhaw-color-burgundy: #70122a;
    /* Abgedunkeltes Dunkelrot. Achtung: NICHT der Hover dunkler Buttons — die
       wechseln seit 2026-09-08 einheitlich auf --dhaw-color-red (Hero,
       abschluss-cta, bild-cta). Bleibt für gedrückte/aktive Zustände. */
    --dhaw-color-burgundy-hover: #5a0e21;

    /* Signalrot. Flächen, Icons, Ränder, Fortschritt — also Grafik, für die
       3:1 genügt. Als Fließtext reicht es mit 4,18:1 nicht für AA. */
    --dhaw-color-red: #e42720;
    /* Signalrot für Text: eine Spur dunkler, damit AA erfüllt ist (4,67:1).
       Immer diese Variante nehmen, sobald die Farbe auf Buchstaben landet. */
    --dhaw-color-red-text: #d81f18;
    /* Hover auf signalroten Buttons (kontaktband). */
    --dhaw-color-red-hover: #c11d17;

    /* Fließtext. Kein reines Schwarz. 16,1:1. */
    --dhaw-color-ink: #1c1c1c;
    /* Zweitrangiger Text: Hinweise, Bildunterschriften. 7,0:1. */
    --dhaw-color-ink-muted: #5c5c5c;

    /* Trennlinien und Ränder. Grafik, nicht Text. */
    --dhaw-color-rule: #c7c7c7;

    /* Flächen. */
    --dhaw-color-surface: #ffffff;
    --dhaw-color-surface-muted: #f8f8f8;

    /* Eyebrow — die kleine Zeile über einer Sektionsüberschrift
       (kontaktband, study-explorer). Versalien brauchen Sperrung, deshalb
       gehören Größe, Transform und Laufweite zusammen. */
    --dhaw-eyebrow-font: "Open Sans", sans-serif;
    --dhaw-eyebrow-size: 15px;
    --dhaw-eyebrow-transform: uppercase;
    --dhaw-eyebrow-tracking: 0.12em;

    /* Sektionsüberschrift (h2) der neuen Blöcke; unter dem Site-Breakpoint
       eine Stufe kleiner. */
    --dhaw-h2-size: 28px;
    /* Versalien, wie das globale h1–h5 aus universal.css — hier ausdrücklich,
       weil einzelne Blöcke die Großschreibung für ihre Karten zurücksetzen. */
    --dhaw-h2-transform: uppercase;
}

@media (max-width: 991px) {
    :root {
        --dhaw-h2-size: 26px;
    }
}