/* ==========================================================================
   brand.css – Vodafone Design-Tokens für Sales-Quality
   Zentrale Quelle für Schriften und Farben laut Vodafone Brand Guidelines.
   Immer diese Variablen nutzen – keine Hex-Werte direkt in Komponenten.
   ========================================================================== */

/* --- Schriften -------------------------------------------------------------
   Variable Font (Gewichtsachse 100–900) als Primärquelle – deckt alle
   Schnitte in einer Datei ab. Familienname überall: "Vodafone".
   Statische Schnitte liegen zusätzlich in assets/fonts/ als Fallback. */
@font-face {
    font-family: 'Vodafone';
    src: url('../fonts/VodafoneVF_Wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Statische Fallback-Schnitte (falls Variable Fonts nicht unterstützt werden) */
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_XLt_A.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_Lt_A.ttf')  format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_Rg_A.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_Md_A.ttf')  format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_SBd_A.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_Bd_A.ttf')  format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_XBd_A.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vodafone'; src: url('../fonts/Vodafone_Blk_A.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
    /* --- Schrift-Stack ---------------------------------------------------- */
    --vf-font: 'Vodafone', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* --- Primärfarben ----------------------------------------------------- */
    --vf-red:        #E60000;  /* Vodafone Red   – PMS 485 / RAL 3020 */
    --vf-slate-grey: #25282B;  /* Vodafone Slate Grey */
    --vf-grey:       #4A4D4E;  /* Vodafone Grey  – PMS 425 / RAL 7043 */
    --vf-white:      #FFFFFF;  /* Vodafone White */

    /* --- Verlaufsfarben (Rot-Gradient) ------------------------------------ */
    --vf-dark-red:   #820000;  /* Vodafone Dark Red */
    /* --vf-red (#E60000) bildet das helle Ende des Verlaufs */

    /* --- Sekundärfarben (nur Akzente: Icons, Badges, Infografiken …) ------- */
    --vf-turquoise:    #00697C;
    --vf-aqua-blue:    #00B0CA;
    --vf-aubergine:    #5E2750;
    --vf-red-violet:   #9C2AA0;
    --vf-spring-green: #A8B400;
    --vf-fresh-orange: #EB6100;
    --vf-lemon-yellow: #FECB00;
    --vf-black:        #000000;

    /* --- Tabellenfarbe ---------------------------------------------------- */
    --vf-15-black:   #F2F2F2;  /* 15 % Black – Tabellen-Zebra o. Ä. */

    /* --- Statusfarben (funktional) ----------------------------------------
       Die Markenpalette kennt kein "Erfolgs-Grün": Spring Green (#A8B400)
       ist zu hell, ein weißes Häkchen darauf wäre nicht lesbar. Daher ein
       eigener, dunklerer Grünton – ausschließlich für Statussymbole und
       Feldrahmen, nie als Flächen- oder Markenfarbe.
       Fehler/Warnung bleiben bei Vodafone Red bzw. Fresh Orange. */
    --vf-success:    #008A00;
    --vf-success-dk: #4CAF50;  /* Dark-Mode-Variante, heller für Kontrast */

    /* --- Abgeleitete Töne --------------------------------------------------
       KEINE offiziellen Markenfarben, sondern Ableitungen davon – nötig
       überall dort, wo mehrere Werte nebeneinander unterscheidbar bleiben
       müssen (Ampeln, Kategorien einer Auswertung, Ränge) und die reine
       Palette dafür nicht genug hergibt.

       Regel: Diese Töne sind Beiwerk und tragen nie eine Aussage über die
       Marke. Flächen, Knöpfe, Überschriften bleiben der Palette oben
       vorbehalten. Wer einen neuen Ton braucht, trägt ihn HIER ein – nicht
       irgendwo in style.css. */

    /* Abgedunkelte Sekundärfarben: als Text oder schmale Fläche auf Hell
       lesbar, wo das Original zu grell wäre. */
    --vf-lemon-yellow-dk:  #C8A200;
    --vf-fresh-orange-dk:  #E06C00;
    --vf-fresh-orange-mid: #C25700;

    /* Aufgehellte bzw. gedämpfte Sekundärfarben für dunklen Grund. */
    --vf-aqua-blue-dark:    #009DB2;
    --vf-spring-green-dark: #8C9800;
    --vf-red-violet-dark:   #B84FBC;
    --vf-fresh-orange-dark: #DE6800;
    --vf-lemon-yellow-dark: #E0B21C;

    /* Neutrale Grautöne für "alles Übrige" und leere Anteile eines Rings. */
    --vf-grey-light: #B9BCBE;   /* Sammelposten auf Hell */
    --vf-grey-mid:   #6E7275;   /* Sammelposten auf Dunkel */
    --vf-track:      #EDEDED;   /* ungefüllter Teil eines Rings, hell */
    --vf-track-dark: #3A3D40;   /* dasselbe auf Dunkel */

    /* Ränge. Gold, Silber und Bronze kennt die Palette nicht – sie müssen
       aber als Metall erkennbar bleiben, sonst ist ein Treppchen keines. */
    --vf-medal-gold:   #E3B23C;
    --vf-medal-silver: #B9BCBE;
    --vf-medal-bronze: #B5713A;

    /* Dieselben Ränge als Textfarbe: Die Originaltöne wären auf dem fast
       weißen Motiv der Quiz-Ergebnisseite kaum zu lesen. */
    --vf-medal-silver-text: #6F7477;
    --vf-medal-bronze-text: #96571F;

    /* --- Semantische Tokens (Light Mode = Standard) ----------------------- */
    --bg:        var(--vf-white);
    /* Hinweis: Die Flächen der Anwendung laufen über --app-bg und --card-bg in
       style.css – die greifen direkt auf die Palette oben zu, weil Seite und
       Karte in beiden Modi dieselbe Schichtung behalten sollen. --surface
       bleibt als semantischer Platzhalter stehen. */
    --surface:   var(--vf-15-black);
    --fg:        var(--vf-slate-grey);
    --fg-muted:  var(--vf-grey);
    --accent:    var(--vf-red);
    --on-accent: var(--vf-white);
    --border:    #E4E4E4;
}

/* --- Dark Mode -------------------------------------------------------------
   Eigene Farbwerte laut Guidelines (Rot heller, damit auf Dunkel lesbar).
   Dark-Mode-Tokens einmal als Regelblock, angewendet über beide Signale:
   1) explizit via data-theme="dark", 2) System-Präferenz (sofern nicht
   ausdrücklich data-theme="light" gesetzt ist). */
:root {
    --vf-red-inverse:       #EA2F2F;  /* Vodafone Red Inverse (Dark Mode) */
    --vf-turquoise-dark:    #0096AD;  /* Turquoise (Dark Mode) */
    --vf-fresh-orange-warn: #EB9700;  /* Fresh Orange – Warnfarbe */
    --vf-red-text:          #F06666;  /* Rot für Text auf Dunkel */
}

:root[data-theme="dark"] {
    --bg:        var(--vf-slate-grey);
    --surface:   var(--vf-grey);
    --fg:        var(--vf-white);
    --fg-muted:  #C7C9CA;
    --accent:    var(--vf-red-inverse);
    --on-accent: var(--vf-white);
    --border:    #3A3D40;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        var(--vf-slate-grey);
        --surface:   var(--vf-grey);
        --fg:        var(--vf-white);
        --fg-muted:  #C7C9CA;
        --accent:    var(--vf-red-inverse);
        --on-accent: var(--vf-white);
        --border:    #3A3D40;
    }
}