/*
 * Die Farben der Suche (Aufgabe P3.5).
 *
 * Eine Stelle für alle Farben, die das Plugin selbst setzt: Ergebnisliste,
 * Vorschlagsliste, Bereichsauswahl. Bis P3.5 lasen die Stylesheets Avadas
 * Variablen (`--primary_color`, `--awb-color7` …) direkt; auf jedem anderen
 * Theme galten deren Rückfallwerte -- das Grün von blattert-muehle.de, mit
 * weißer Schrift darauf bei 1,94:1.
 *
 * ## Überschreiben
 *
 * Die Vorgaben stehen auf `:where(:root)`, also mit Spezifität null. Ein Theme
 * setzt einfach
 *
 *     :root { --f12-search-accent: #b5451b; --f12-search-on-accent: #fff; }
 *
 * und gewinnt, egal in welcher Reihenfolge die Dateien geladen werden.
 * **Auf `:root`, nicht auf einem inneren Element:** Die beiden abgeleiteten
 * Töne unten werden auf `:root` aus dem Akzent gerechnet.
 *
 * Unter Avada legt `integrations/avada/palette` Avadas Farben darüber.
 *
 * ## Geprüft
 *
 * `tests/test-color-tokens.php` rechnet jedes Paar nach, das die Stylesheets
 * verwenden: Schrift mindestens 4,5:1, Fokusrahmen und Akzent als Rahmen
 * mindestens 3:1. Wer hier eine Farbe ändert, lässt den Test laufen.
 *
 * Bei jeder Änderung `Style_Tokens::VERSION` hochzählen.
 */

:where(:root) {
    /* Titel und Preis -- was zuerst gelesen wird. 16,7:1 auf Weiß. */
    --f12-search-ink: #1e1e1e;
    /* Fließtext, Zähler, leise Angaben. 7,3:1 auf Weiß, 6,4:1 auf Fläche 2. */
    --f12-search-text: #50575e;
    /* Karten, Listen, Felder. */
    --f12-search-surface: #fff;
    /* Flächen darunter: Platzhalter, Zähler, Zustand beim Überfahren. */
    --f12-search-surface-2: #f0f0f1;
    /* Trennlinien. Nur Schmuck -- nichts ist allein an ihnen zu erkennen. */
    --f12-search-border: #dcdcde;
    /* Aktive Chips und Facetten, Knöpfe, aktuelle Seite. 5,2:1 auf Weiß. */
    --f12-search-accent: #2271b1;
    /* Schrift auf dem Akzent. Weiß auf #2271b1: 5,2:1. */
    --f12-search-on-accent: #fff;

    /*
     * Zwei Töne aus dem Akzent: dunkel für Schrift und den Fokusrahmen, sehr
     * hell als Fläche. Die Werte hier gelten nur ohne color-mix() und sind aus
     * dem Akzent oben vorgerechnet; darunter werden sie aus dem jeweiligen
     * Akzent gerechnet.
     */
    --f12-search-accent-ink: #183d50;
    --f12-search-accent-soft: rgba(34, 113, 177, .14);

    /*
     * Maße (P5.4). Die gemeinsame Höhe von Suchfeld, Bereichsauswahl und Knopf,
     * wenn die Auswahl in einem Suchblock steht -- dort brachte das Theme
     * drei verschiedene mit. 2,75em sind bei 16 px Schrift 44 px, die
     * Mindestgröße einer Tippfläche.
     */
    --f12-search-control-height: 2.75em;

    /* P43: Abstand der mitlaufenden Filterleiste am Handy vom oberen Rand --
     * Themes mit fester Kopfzeile setzen hier deren Höhe. */
    --f12-search-sticky-top: 0px;

    /* P30: Rückfallwerte des eigenständigen Suchbausteins. Die gespeicherte
     * Gestaltung überschreibt sie ausschließlich unter `.f12-search`. */
    --f12-search-form-background: #fff;
    --f12-search-form-text: #1e1e1e;
    --f12-search-form-border: #dcdcde;
    --f12-search-form-focus: #183d50;
    --f12-search-form-button: #2271b1;
    --f12-search-form-button-text: #fff;
    --f12-search-form-icon-button: #2271b1;
    --f12-search-form-icon: #fff;
    --f12-search-form-icon-size: 20px;
    --f12-search-form-expand-width: 320px;
    /* Setzt script.js je Suchbaustein: Platz bis zum Fensterrand (P34). */
    --f12-search-ausklapp-platz: 100vw;
    --f12-search-form-dialog: #fff;
    --f12-search-form-backdrop: #000;
    --f12-search-form-radius: 4px;
    --f12-search-form-height: 44px;
    --f12-search-form-padding-x: 12px;
    --f12-search-form-padding-y: 8px;
    --f12-search-form-margin-y: 0px;
    --f12-search-form-max-width: 720px;
    --f12-search-form-font-family: inherit;
    --f12-search-form-font-size: 16px;
    --f12-search-form-font-weight: 400;
    /* P36: Laufweite des Platzhalters. */
    --f12-search-form-placeholder-spacing: 0em;
    /* P37: Schrift im vollflächigen Overlay. */
    --f12-search-form-overlay-font-size: 16px;
}

/*
 * **Die Rückfallwerte oben müssen echte Farben sein**, keine zweite
 * color-mix()-Zeile: Eine Eigenschaft mit `--` nimmt jeden Tokenstrom an. Ein
 * nicht unterstütztes color-mix() fällt deshalb nicht auf die Zeile darüber
 * zurück, sondern erst bei der Benutzung aus. So hat Stufe 3.1 schon einmal
 * die Kartenflächen durchsichtig gemacht.
 */
@supports (color: color-mix(in srgb, red 10%, white)) {
    :where(:root) {
        --f12-search-accent-ink: color-mix(in srgb, var(--f12-search-accent) 42%, #10180a);
        --f12-search-accent-soft: color-mix(in srgb, var(--f12-search-accent) 14%, transparent);
    }
}