/**
 * HypeBites – Design-Token
 * ============================================================================
 *
 * Die Farbwerte, Radien und Abstände der App -- an genau EINER Stelle.
 *
 * WARUM DAS NÖTIG WURDE
 * ---------------------
 * Vorher standen dieselben Hexwerte über sechs Stylesheets verteilt: 83-mal
 * allein das Acid-Gelb. Zwei Folgen davon waren schon sichtbar:
 *
 *   - Die Flächenfarbe gab es in zwei Fassungen (#1c1c1c und #1c1c1e), je
 *     nachdem, welche Datei zuerst geschrieben wurde. Nebeneinander sieht
 *     man den Unterschied nicht, in Summe wirkt die Seite unruhig.
 *   - Eine Farbänderung hiess: sechs Dateien durchsuchen und hoffen, keine
 *     Stelle übersehen zu haben.
 *
 * Jetzt: hier ändern, überall geändert.
 *
 * WIRD ZUERST GELADEN
 * -------------------
 * hb-tokens.css ist Abhängigkeit aller anderen Stylesheets (siehe
 * inc/hb-assets.php). Die Variablen stehen auf :root, gelten also im
 * gesamten Dokument -- auch für Divi-Module und Ultimate-Member-Formulare.
 *
 * FALLBACK
 * --------
 * Jede Verwendung schreibt sich als var(--hb-acid, #e2ff00): Sollte diese
 * Datei einmal nicht geladen werden, sieht die Seite trotzdem richtig aus
 * statt farblos.
 */

:root {
    /* --- Flächen ------------------------------------------------------- */
    --hb-ink:       #121212;   /* Seitengrund */
    --hb-surface:   #1c1c1c;   /* Karten, Kacheln, Boxen */
    --hb-surface-2: #262626;   /* abgesetzt innerhalb einer Kachel */
    --hb-surface-3: #2e2e30;   /* dritte Ebene: Chips auf Karten */
    --hb-line:      #2f2f2f;   /* ruhige Kanten */

    /* --- Schrift ------------------------------------------------------- */
    --hb-text:      #ffffff;
    --hb-text-soft: #c9c9ce;   /* Fliesstext, Beschreibungen */
    --hb-muted:     #8e8e93;   /* Nebeninformation, Zeitangaben */

    /* --- Marke --------------------------------------------------------- */
    --hb-acid:      #e2ff00;   /* die eine Signalfarbe */
    --hb-acid-hi:   #ccff00;   /* Hover-Stufe */
    --hb-punch:     #ff3d7f;   /* Like-Herz */
    --hb-cool:      #00e5ff;   /* reserviert */
    --hb-danger:    #ff5722;   /* Löschen, Warnung */

    /* --- Form ---------------------------------------------------------- */
    --hb-radius:     18px;     /* Karten und Kacheln */
    --hb-radius-sm:  12px;     /* Bilder, Felder, kleine Flächen */
    --hb-radius-pill: 999px;   /* Pillen und runde Knöpfe */

    /* --- Abstände ------------------------------------------------------
       Eine Leiter statt freier Werte. Jeder Abstand im Projekt ist eine
       Sprosse davon -- dadurch wiederholt sich derselbe Rhythmus auf jeder
       Seite, und niemand muss sich fragen, ob hier nun 22 oder 24 Pixel
       hingehören.

         xs  innerhalb eines Bauteils (Icon zu Text)
         sm  zwischen eng zusammengehörenden Zeilen
         md  zwischen Bauteilen einer Gruppe
         lg  zwischen Gruppen
         xl  zwischen Abschnitten -- der grösste Sprung, den es gibt        */
    --hb-space-xs:  8px;
    --hb-space-sm: 12px;
    --hb-space-md: 20px;
    --hb-space-lg: 30px;
    --hb-space-xl: 46px;

    /* DER Seitenrand der App. Ein Wert für jede Seite -- Startseite,
       Dashboard, Spot, Profil. Er stammt von der Suchleiste des Home-
       Screens: Die ist der Massstab, an dem sich alles ausrichtet.
       Unterschiedliche Ränder je Seite waren der Grund, warum sich
       Seitenwechsel wie Sprünge angefühlt haben. */
    --hb-gutter:   20px;

    /* Lesebreite: Wie breit eine Spalte mit Text und Karten höchstens
       werden darf. Am Telefon ohne Wirkung -- der Schirm ist schmaler.
       Ab Tablet wächst der Wert in hb-wide.css mit und hält Spot-Seite,
       Profil und Listen auf derselben Breite. */
    --hb-measure:  780px;

    /* --- Schriftgrössen ------------------------------------------------
       Bewusst zurückhaltend. Grosse Schrift auf kleinem Schirm wirkt nicht
       kräftig, sondern eng: Jede Zeile bricht früher um, und zwischen den
       Zeilen bleibt kein Weiss mehr übrig. Ruhe entsteht aus Zeilenabstand
       und Rand, nicht aus Schriftgrösse. */
    --hb-text-xs:  12px;   /* Beschriftungen unter Symbolen */
    --hb-text-sm:  13px;   /* Nebeninformation, Datum, Adresse */
    --hb-text-md:  15px;   /* Fliesstext */
    --hb-text-lg:  17px;   /* Abschnittsüberschrift */
    --hb-text-xl:  24px;   /* Seitentitel */

    /* --- Bewegung ------------------------------------------------------ */
    --hb-ease: .15s ease;

    /* --- Schrift ------------------------------------------------------- */
    --hb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Auf schmalen Geräten rückt alles eine Stufe enger zusammen. Feste Werte
   wären hier falsch: Was am Desktop luftig wirkt, frisst auf 390 Pixeln
   ein Drittel der Breite. */
@media (max-width: 600px) {
    :root {
        --hb-space-lg: 26px;
        --hb-space-xl: 38px;
        /* Der Seitenrand bleibt bewusst gleich: Er ist die eine Linie,
           an der man erkennt, dass man in derselben App ist. */
    }
}