/*
 * VERRE — des surfaces translucides posées sur une brume colorée.
 *
 * C'est le « glassmorphism » : le fond de page porte deux voiles de couleur, et tout ce qui se
 * pose dessus — cartes, barre du haut, colonne, menus — est un verre dépoli qui laisse deviner
 * ce qui passe derrière. Rien d'autre ne bouge : ni la disposition, ni la taille du texte, ni
 * les composants.
 *
 * Elle est claire, et seulement claire. Une première version se jouait la nuit, sur un fond
 * noir traversé de halos : l'effet y était sourd, et le noir mangeait le verre au lieu de le
 * porter. C'est en clair que la matière se voit — la brume passe au travers des panneaux, et
 * c'est tout l'intérêt.
 *
 * Deux choses à savoir avant de la choisir :
 *
 * — le flou est la seule règle que cette palette ne peut pas porter seule : `backdrop-filter`
 *   n'est pas une couleur, et vit donc dans `app.css`, sous ce nom de palette ;
 * — le contrôle de contraste mesure la couleur de base de chaque verre, sans la brume qui
 *   transparaît derrière. Les fonds sont choisis assez opaques — 65 % et plus — et la brume
 *   assez pâle pour que l'écart réel reste inférieur à un dixième de rapport.
 */
[data-theme="verre"] {
    --app-theme-label: "Verre";
    color-scheme: light;

    /*
     * La brume. Deux voiles posés aux coins hauts, qui se fondent dans un ciel très pâle. Chaque
     * arrêt est un fond sur lequel du texte se pose : le plus sombre d'entre eux, le bleu du
     * premier voile, est celui qui décide du contraste.
     */
    --app-bg: radial-gradient(1000px 700px at 8% -12%, #e2ecff 0%, #f2f5fb 62%),
              radial-gradient(900px 600px at 96% 4%, #ffe9f1 0%, #f2f5fb 58%),
              #eef2f9;

    /* Les verres, du plus discret au plus dense. L'alpha est écrit dans la couleur elle-même :
       le jeton reste une couleur, et aucun composant n'a à connaître la transparence. */
    --app-surface: #ffffffa6;
    --app-raised: #ffffffcc;
    --app-hover: #1a22330f;

    /*
     * Le verre de ce qui flotte au-dessus de la page — menus déroulants et boîtes de dialogue.
     * Presque opaque, là où une carte se contente de 65 %.
     *
     * Une carte a la page sous elle : un fond calme, connu d'avance. Un menu, lui, s'ouvre sur ce
     * qui se trouve là, et ce qui se trouve là est souvent un bouton plein. Le flou n'y peut
     * rien : il efface le détail fin, pas une grande forme unie — un bouton bleu flouté reste un
     * rectangle bleu, et son libellé se lisait au travers du menu. C'est la densité qui le
     * couvre, pas le flou. Il en reste un voile, assez pour que la matière se voie encore.
     *
     * Ce jeton ne s'emploie que sous ces deux palettes : ailleurs, la règle qui le lit ne
     * rencontre aucune balise. Voir `app.css`, section « Le flou des palettes de verre ».
     */
    --app-glass-pop: #fffffffa;

    /* Encres. Elles doivent tenir sur le plus sombre des arrêts de la brume, pas seulement sur
       le blanc des cartes. */
    --app-ink: #1a2233;
    --app-ink-soft: #4a5468;
    --app-ink-muted: #565f70;
    --app-ink-inverse: #ffffff;

    /* Les filets d'un verre sont des reflets : une bordure bleutée et voilée, jamais un gris. */
    --app-line: #c9d4e8a6;
    --app-line-strong: #b3c1dacc;
    --app-line-control: #6f7c98;

    /* Un bleu profond : sur du verre, un accent pâle se dissoudrait dans la brume. */
    --app-accent: #1558b8;
    --app-accent-hover: #0f4494;
    --app-accent-soft: #dbe8fb;
    --app-accent-ink: #0c3c80;
    --app-on-accent: #ffffff;

    --app-neutral: #4a5468;
    --app-neutral-hover: #333c4d;
    --app-neutral-soft: var(--app-raised);
    --app-neutral-ink: var(--app-ink-soft);
    --app-on-neutral: var(--app-ink-inverse);

    /*
     * La colonne est un verre elle aussi, et non une surface pleine : c'est ce qui distingue
     * cette palette de toutes les autres. Elle porte donc de l'encre sombre, comme une carte.
     */
    --app-rail: #ffffff8c;
    --app-rail-ink: #1a2233;

    /* Les voiles de la colonne sont blancs et non d'encre : sur un verre pâle, la page en cours
       s'éclaircit, elle ne se salit pas. */
    --app-rail-veil: #ffffff73;
    --app-rail-veil-strong: #ffffffd9;

    /* Des coins larges : le verre est une matière épaisse, un angle vif le contredit. */
    --app-radius: 16px;

    /* Des ombres portées loin et diffuses, comme une plaque tenue au-dessus de la page. */
    --app-shadow-sm: 0 2px 10px rgb(26 34 51 / .06);
    --app-shadow: 0 4px 20px rgb(26 34 51 / .08);
    --app-shadow-pop: 0 16px 40px rgb(26 34 51 / .16);
    --app-backdrop: rgb(26 34 51 / .3);
}