/*
 * AURORE — une aurore boréale, en plein jour.
 *
 * Elle reprend le principe du Verre — un fond coloré, des surfaces translucides qui le laissent
 * transparaître — et lui ajoute ce qui manquait au Verre : de la couleur, et beaucoup.
 *
 * Une aurore n'est pas verte. Elle est verte au pied, cyan au milieu, magenta au sommet, et
 * c'est l'écart entre ces trois-là qui fait qu'on reconnaît le ciel. Deux versions ont été
 * jetées avant celle-ci : une en pourpre saturé, qui tapait ; une en deux tons voisins, qui ne
 * faisait qu'une teinte délavée. Ici les trois couleurs sont présentes, sur la colonne comme
 * sous les cartes.
 *
 * Ce qu'il a fallu payer pour ça : les encres descendent. Tout ce qui s'écrit sur le fond —
 * texte estompé, accent, succès, bord de champ — a été assombri, parce qu'un fond franchement
 * teinté est un fond plus sombre, et que le rapport de 4,5:1 se mesure contre l'arrêt le plus
 * sombre du dégradé. C'est la contrainte qui tient toute cette palette : la couleur peut être
 * franche, elle ne peut pas être foncée, et l'encre doit descendre d'autant.
 *
 * Elle est claire, et seulement claire, comme le Verre : la nuit, un ciel pâle n'a nulle part
 * où se poser.
 *
 * Le flou vit dans `app.css`, avec celui du Verre : `backdrop-filter` n'est pas une couleur, et
 * aucun jeton ne peut le transporter.
 */
[data-theme="aurore"] {
    --app-theme-label: "Aurore";
    color-scheme: light;

    /*
     * Le ciel. Trois voiles, un par couleur de l'aurore : le vert en haut à gauche, le cyan en
     * haut à droite, le magenta en bas. Ils s'éteignent vers le transparent et non vers le blanc,
     * si bien qu'ils se recouvrent au lieu de s'annuler — c'est là que naissent les teintes
     * intermédiaires, celles qu'on ne peut pas écrire.
     *
     * Chaque arrêt est un fond sur lequel du texte se pose, et c'est le plus sombre d'entre eux
     * qui décide de tout le reste de ce fichier.
     */
    --app-bg: radial-gradient(1200px 900px at 14% 2%, #b6f0cf 0%, transparent 62%),
              radial-gradient(1100px 800px at 88% 6%, #bfe9f8 0%, transparent 60%),
              radial-gradient(1300px 950px at 72% 100%, #f8d4f0 0%, transparent 62%),
              #eef2f8;

    /* 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: #ffffffa8;
    --app-raised: #ffffffcc;
    --app-hover: #17262e0f;

    /* Le verre de ce qui flotte au-dessus de la page — voir le Verre, où ce jeton est expliqué :
       un menu s'ouvre sur ce qui se trouve là, et le flou n'efface pas une grande forme unie. */
    --app-glass-pop: #fffffffa;

    /* Encres, tirées vers le bleu-vert du ciel plutôt que vers le gris. */
    --app-ink: #17262e;
    --app-ink-soft: #45565f;
    --app-ink-muted: #526070;
    --app-ink-inverse: #ffffff;

    /* Les filets sont des reflets : une bordure voilée, jamais un gris franc. Celui des champs
       descend plus bas que les autres — c'est un trait, il doit se voir sur le vert comme sur
       le rose. */
    --app-line: #c7dbdda6;
    --app-line-strong: #aec7cbcc;
    --app-line-control: #62767d;

    /* Un vert-bleu profond, pris au fond du ciel. Il descend d'un cran par rapport au reste des
       palettes claires : il s'écrit sur le fond teinté, pas seulement sur le blanc des cartes. */
    --app-accent: #0d5f5b;
    --app-accent-hover: #094845;
    --app-accent-soft: #dbf0ed;
    --app-accent-ink: #0a4b47;
    --app-on-accent: #ffffff;

    /* Le vert du succès descend pour la même raison, et se déplace en entier — ses cinq jetons
       à la fois, faute de quoi le mélange de l'ancien et du nouveau tomberait sous le seuil. */
    --app-success: #04664a;
    --app-success-hover: #03533c;
    --app-success-soft: #e3f4ec;
    --app-success-ink: #05442f;
    --app-on-success: #ffffff;

    --app-neutral: #45565f;
    --app-neutral-hover: #2e3d45;
    --app-neutral-soft: var(--app-raised);
    --app-neutral-ink: var(--app-ink-soft);
    --app-on-neutral: var(--app-ink-inverse);

    /*
     * La colonne : le seul dégradé de l'écran, et le geste qui donne son nom à la palette.
     *
     * Elle suit l'ordre d'une vraie aurore, telle qu'on la photographie : le magenta couronne,
     * le violet et le cyan font le rideau, le vert tombe au pied. Elle est franche, là où le
     * fond reste un voile — c'est une bande étroite, elle peut porter la couleur pleine.
     *
     * En verre teinté plutôt qu'en aplat : le ciel de la page passe encore dessous. Et de
     * l'encre sombre par-dessus, comme sur une carte — une bande pastel sous du texte blanc ne
     * se lirait pas.
     */
    --app-rail: linear-gradient(180deg,
        #f2a9e2d9 0%,
        #bfaaf2d9 34%,
        #86d6ead9 68%,
        #8ee9bcd9 100%);
    --app-rail-ink: #17262e;

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

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

    /* Des ombres portées loin et diffuses, teintées du bleu-vert de l'encre. */
    --app-shadow-sm: 0 2px 10px rgb(23 38 46 / .06);
    --app-shadow: 0 4px 20px rgb(23 38 46 / .08);
    --app-shadow-pop: 0 16px 40px rgb(23 38 46 / .16);
    --app-backdrop: rgb(23 38 46 / .3);
}