/**
 * _notifications-cloche-landing.css
 * Les tokens de la cloche, pour les pages vitrine UNIQUEMENT.
 *
 * POURQUOI CE FICHIER EXISTE
 * _notifications-cloche.css n'utilise que des tokens --notif-*. Dans
 * l'application ils viennent de base/_variables.css (clair) et de
 * mode_sombre.css (sombre), tous deux tirés par style.css. Les pages vitrine ne
 * chargent PAS style.css, et c'est délibéré : il amènerait tout le design de
 * l'application par-dessus landing-modern.css.
 *
 * LE PIÈGE, ET IL EST INVERSÉ — à lire avant de toucher aux valeurs
 * L'application est CLAIRE par défaut : `:root` porte le clair
 * (base/_variables.css:143-152) et `html[data-theme="dark"]` le sombre
 * (mode_sombre.css:37-46).
 * La landing est DARK-FIRST : `:root` porte le sombre et
 * `html[data-theme="light"]` le clair (landing-modern.css:36 et 78).
 * Les valeurs ci-dessous sont donc rangées À L'ENVERS de celles de
 * l'application. Recopier _variables.css tel quel dans `:root` donnerait une
 * cloche blanche posée sur une page noire.
 *
 * `--radius` n'est pas repris : landing-modern.css le définit déjà (l.68).
 */

/* Sombre — le défaut de la landing. Mêmes valeurs que mode_sombre.css:37-46. */
:root {
    --notif-panel-bg:        #131829;
    --notif-panel-border:    rgba(255, 255, 255, 0.14);
    --notif-panel-shadow:    0 14px 55px rgba(0, 0, 0, 0.55);
    --notif-item-hover-bg:   #1e2a42;
    --notif-unread-marker:   #60a5fa;
    --notif-badge-bg:        #f87171;
    --notif-badge-ink:       #131829;
    --notif-text:            #f1f5f9;
    --notif-text-muted:      #94a3b8;
    --notif-icon:            #cbd5e1;
}

/* Clair. Mêmes valeurs que base/_variables.css:143-152. */
html[data-theme="light"] {
    --notif-panel-bg:        #ffffff;
    --notif-panel-border:    #d1d7e0;
    --notif-panel-shadow:    0 14px 55px rgba(16, 24, 40, 0.18);
    --notif-item-hover-bg:   #f1f5f9;
    --notif-unread-marker:   hsl(227 100 58);
    --notif-badge-bg:        #D54141;
    --notif-badge-ink:       #ffffff;
    --notif-text:            #0f172a;
    --notif-text-muted:      #5b6b80;
    --notif-icon:            #5b6b80;
}