/* ---------------------------------------------------------------------------
   Motchi : les jetons de la refonte (lot 2).

   Un jeton est un rôle, pas une couleur : `--danger` dit « ce qui refuse », et
   sa valeur tient la règle de contraste par construction, au lieu de dépendre
   du choix fait à chaque appel.

   Deux surfaces portent tout le jeu, et elles n'ont pas les mêmes encres :

   - le **feutre**, fond de la page, qui porte `--light` et `--light-sub` ;
   - le **papier**, carte crème posée dessus, qui porte `--ink`, `--ink-soft` et
     `--cream-sub`.

   Une encre d'état (`--success`, `--danger`, `--warning`) est une encre de
   papier : c'est là qu'elle est lue, sur sa propre pastille. Le feutre a ses
   contreparties claires, déclarées à part et seulement là où un usage existe.

   La provenance : les couleurs, les feutres et l'échelle de titres sont ceux du
   proto, au chiffre près. Les échelles d'espacement, de rayon et d'ombre n'y
   sont pas : le proto emploie 61 valeurs d'espacement, 48 rayons et 191 ombres,
   c'est-à-dire un nuage et non une échelle. Elles sont donc décidées ici, aux
   valeurs que le proto emploie le plus souvent, ce qui déplace des pixels
   ailleurs : c'est attendu. Voir `docs/refonte-graphique.md`.
--------------------------------------------------------------------------- */

:root {
    /* ── Marque ── */
    --primary: #4A7EC8;
    --primary-dark: #35619F;
    --gold: #FACC15;
    --gold-dark: #D9AC06;
    --panda: #B24E2A;
    /* Les deux encres que l'on pose sur une couleur pleine : du blanc sur un
       accent soutenu, du brun sur l'or, qui est trop clair pour du blanc. */
    --on-accent: #FFFFFF;
    --on-gold: #3A2E00;

    /* ── Surfaces ──
       Trois beiges et rien de plus : le papier va de `--cream` à `--cream-2`,
       et son bord est `--paper-border`. Ce qui en dérive se calcule au lieu de
       s'ajouter à la liste (l'épaisseur d'une carte, le bandeau doré), pour que
       changer le papier suffise à tout déplacer. */
    --cream: #FBF7EE;
    --cream-2: #F3ECDC;
    --paper-border: #E2D6BB;
    --paper-edge: color-mix(in srgb, var(--paper-border) 97%, #000);
    /* Le blanc du proto n'est pas plat : ses tuiles vont du blanc à un gris
       très froid, avec un liseré de la même famille. */
    --tile: #FFFFFF;
    --tile-2: #F3F7F7;
    --tile-border: #D8E1E3;
    /* Le feutre est donné par le mode, plus bas : les valeurs ici sont celles
       de l'accueil, pour qu'une page sans `data-mode` reste peinte. */
    --felt-1: #33578C;
    --felt-mid: #2D4D7A;
    --felt-2: #264268;
    /* Voile des fenêtres de confirmation, sur n'importe quel feutre. */
    --scrim: rgba(20, 34, 58, .72);
    /* La barre du haut ne suit pas le mode, et c'est pour cela qu'elle est ici
       plutôt que dans les trois blocs plus bas : elle est le même bandeau sur
       toutes les pages, ce qui la rend reconnaissable et évite de la voir
       changer de couleur à chaque navigation. Le proto la pose ainsi. */
    --topbar: #1F385B;
    /* Son encre au repos, constante elle aussi : sur un bandeau qui ne change
       pas, une encre teintée par le mode serait la seule chose à changer, et la
       barre paraîtrait suivre le mode à moitié. */
    --topbar-ink: #D8E5F5;

    /* ── Encres du papier ── */
    --ink: #23375E;
    --ink-soft: #4A3D28;
    --cream-sub: #756547;
    /* Le fantôme d'un champ. C'est un jeton et pas un mélange écrit dans le
       socle, parce que du texte que l'utilisateur doit lire se mesure : dilué
       dans du `transparent`, il valait 2,5:1 sur le blanc du champ et échappait
       à la mesure, un mélange avec du vide n'étant pas une couleur. La teinte
       est celle du proto, ramenée au seuil : 4,85:1 sur le champ. */
    --ink-placeholder: #777164;

    /* ── Encres du feutre ──
       `--light-sub` est teintée par le mode (déclarée plus bas) : le proto
       écrit ses surtitres en rose pâle sur le feutre prune et en bleu pâle sur
       le bleu-vert, jamais dans le même gris-bleu. */
    --light: #EAF2FF;

    /* ── États ──
       Les trois encres tiennent 4.5:1 sur le crème comme sur leur propre
       pastille. `--warning` n'existe pas dans le proto : sa valeur est celle
       que l'admin emploie déjà. Le bandeau doré se dilue dans le papier plutôt
       que d'ajouter un beige de plus. */
    --success: #167746;
    --success-strong: #164F32;
    --success-bg: #DCFCE7;
    --danger: #C0392B;
    --danger-strong: #6D2418;
    --danger-bg: #FDE8E7;
    --warning: #9A4A16;
    --warning-bg: #FFF7ED;
    --gold-bg: color-mix(in srgb, var(--gold) 22%, var(--cream));
    /* Sur le feutre, les mêmes états s'écrivent en clair. */
    --danger-on-felt: #FFE0E0;
    --warning-on-felt: #FDBA74;

    /* ── Typographie ──
       Trois familles : les titres en Fredoka, le texte en Nunito, les surtitres
       et les codes en Space Mono. */
    --font-title: 'Fredoka', sans-serif;
    --font-text: 'Nunito', sans-serif;
    --font-code: 'Space Mono', monospace;

    /* Neuf tailles, et pas une de plus : les six titres du proto, nommés par ce
       qu'ils titrent, et trois tailles de texte. Deux marches ont été retirées
       pour cette raison, un 17 px qui doublait le titre de carte et un 10 px qui
       doublait le surtitre : une échelle où deux marches se ressemblent ne se
       choisit plus, elle se tire au sort. Le repli mobile est en fin de
       fichier. */
    --type-display: clamp(36px, 4.8vw, 52px);
    --type-page: 42px;
    --type-metric: 36px;
    --type-compact: 32px;
    --type-section: 22px;
    --type-card: 18px;
    --type-body: 15px;
    --type-sm: 13px;
    --type-label: 11px;

    /* ── Espacements ──
       Pas de 4 px. Une valeur mesurée qui tombe entre deux marches prend la
       plus proche. */
    --space-0: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ── Mise en page ──
       Les pages de contenu partagent la même gouttière, quel que soit leur
       mode. Les composants peuvent resserrer leur propre lecture, mais jamais
       redéfinir la largeur de l'écran qui les accueille. */
    --content-width: 1040px;

    /* ── Rayons ──
       Sept marches relevées sur les composants du proto : la pastille (11), la
       tuile et le champ (14), le bouton et la carte blanche (17), la carte de
       papier (21), la grande carte d'écran (24) et la carte de mode (28). */
    --radius-xs: 6px;
    --radius-sm: 11px;
    --radius-md: 14px;
    --radius-lg: 17px;
    --radius-xl: 21px;
    --radius-2xl: 24px;
    --radius-3xl: 28px;
    --radius-pill: 999px;

    /* ── Ombres ──
       Trois manières de décoller un élément, et le proto les emploie toutes :
       l'ombre pleine, qui donne une épaisseur (boutons, cartes sur le papier),
       l'ombre floue, qui donne une hauteur (cartes sur le feutre), et le liseré
       intérieur, qui n'est pas une élévation mais un bord. Les ombres du feutre
       sont tirées du feutre lui-même, donc du mode : elles sont déclarées plus
       bas, avec les autres composés. */
    --shadow-paper-sm: 0 3px 8px rgba(56, 40, 19, .10);
    --shadow-paper-md: 0 5px 12px rgba(56, 40, 19, .14);
    --hairline: inset 0 0 0 1px rgba(0, 0, 0, .04);
    --hairline-light: inset 0 0 0 1px rgba(255, 255, 255, .14);

    /* ── Mouvement et états ──
       La courbe rebondit : c'est la signature des boutons du proto. Le halo de
       focus, qui prend la couleur du mode, est déclaré plus bas. */
    --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast: .12s;
    --dur: .15s;
    --dur-slow: .2s;
    --disabled-opacity: .5;
}

/* ---------------------------------------------------------------------------
   Les modes.

   Chaque espace du jeu a son identité, et ce sont les mêmes rôles qui changent
   de valeur d'un espace à l'autre : l'accent (`--mode`), les trois marches du
   feutre, l'inclinaison et la lumière de ce feutre, et l'encre secondaire qui
   s'y lit. Un composant ne connaît jamais son mode, il lit ces rôles, et c'est
   un ancêtre qui dit lesquels (`<body data-mode="…">`, posé par le gabarit).

   Sur le `body` et non sur le `<html>` : Turbo remplace le corps du document à
   chaque navigation mais ne touche pas aux attributs de la racine, donc un mode
   posé là-haut restait celui de la première page ouverte, et l'on se retrouvait
   en prune sur l'accueil.

   Les valeurs sont celles du proto, au chiffre près, feutres compris. Elles
   coûtent trois écarts de contraste, listés dans `DesignTokens` et affichés par
   `/styleguide` : le dessin l'emporte ici, et les écrans posent leur texte sur
   le papier plutôt que sur le feutre.
--------------------------------------------------------------------------- */

:root,
[data-mode="home"] {
    --mode: var(--primary);
    --mode-dark: var(--primary-dark);
    --mode-light: #E8F0FE;
    --light-sub: #C7D5EC;
    /* Ce que la barre du haut emprunte au mode, et la seule chose : la marque de
       l'entrée courante et son survol. L'accueil n'a pas d'accent à lui dans le
       proto, qui l'y marque d'un voile blanc ; les deux espaces prennent le
       leur. */
    --topbar-mark: rgba(255, 255, 255, .11);
    --topbar-hover: rgba(255, 255, 255, .08);
    --felt-1: #33578C;
    --felt-mid: #2D4D7A;
    --felt-2: #264268;
    --felt-angle: 160deg;
    --felt-glow: rgba(255, 255, 255, .09);
    --felt-weave: rgba(255, 255, 255, .03);
}

[data-mode="daily"] {
    --mode: #7A4968;
    --mode-dark: #4C2D43;
    --mode-light: #F4E7EE;
    --light-sub: #EFCFE0;
    --topbar-mark: var(--mode);
    --topbar-hover: color-mix(in srgb, var(--mode) 45%, transparent);
    --felt-1: #8A5878;
    --felt-mid: #70435F;
    --felt-2: #57334D;
    --felt-angle: 150deg;
    --felt-glow: rgba(255, 255, 255, .13);
    --felt-weave: rgba(255, 255, 255, .027);
}

[data-mode="friends"] {
    --mode: #456F87;
    --mode-dark: #294A63;
    --mode-light: #DCECF2;
    --light-sub: #DCECF2;
    --topbar-mark: var(--mode);
    --topbar-hover: color-mix(in srgb, var(--mode) 45%, transparent);
    --felt-1: #678FA6;
    --felt-mid: #4E7892;
    --felt-2: #3C647F;
    --felt-angle: 145deg;
    --felt-glow: rgba(255, 255, 255, .16);
    --felt-weave: rgba(255, 255, 255, .024);
}

/* Les jetons composés à partir d'un jeton de mode se redéclarent ici, sur tout
   porteur de mode plutôt qu'une fois pour toutes sur la racine. La raison est
   une subtilité des variables CSS, qui coûte cher à découvrir : une valeur qui
   en cite une autre est résolue là où elle est écrite, pas là où elle est lue.
   Un `--ring` déclaré sur la racine y fige la couleur de l'accueil, et un bloc
   `data-mode="daily"` en hériterait tel quel, halo bleu compris.

   Les familles reprennent les noms déclarés plus haut : le styleguide, qui lit
   ce fichier, les affiche sous le même intertitre. */
:root,
[data-mode] {
    /* ── Surfaces ──
       Le feutre est une recette et trois valeurs : la lumière en haut à droite,
       le tissage en diagonale, le dégradé du mode. La **carte de mode** est le
       même dégradé, resserré, incliné autrement et **sans tissage** : le fond de
       la page est hachuré, une carte posée dessus ne l'est pas, sans quoi les
       deux trames se superposent. */
    --felt-bg:
        radial-gradient(80% 58% at 84% -8%, var(--felt-glow), transparent 64%),
        repeating-linear-gradient(45deg, var(--felt-weave) 0 2px, transparent 2px 7px),
        linear-gradient(var(--felt-angle), var(--felt-1) 0%, var(--felt-mid) 54%, var(--felt-2) 100%);
    --mode-card-bg: linear-gradient(
        125deg,
        color-mix(in srgb, var(--felt-1) 96%, #000) 0%,
        color-mix(in srgb, var(--felt-mid) 94%, #000) 50%,
        color-mix(in srgb, var(--felt-2) 94%, #000) 100%
    );

    /* ── Ombres ── */
    --shadow-felt-md: 0 8px 18px color-mix(in srgb, var(--felt-2) 45%, transparent);
    --shadow-felt-lg: 0 18px 42px color-mix(in srgb, var(--felt-2) 55%, transparent);
    --shadow-mode-card: 0 22px 55px color-mix(in srgb, var(--felt-2) 62%, transparent), inset 0 1px rgba(255, 255, 255, .14);

    /* ── Mouvement et états ── */
    --ring: 0 0 0 3px color-mix(in srgb, var(--mode) 35%, transparent);
}

/* Le repli mobile de l'échelle de titres, repris du proto. Il vaut pour les
   trois modes : c'est une mesure de place, pas une identité. */
@media (max-width: 700px) {
    :root {
        --type-display: 30px;
        --type-page: 32px;
        --type-metric: 29px;
        --type-compact: 26px;
        --type-section: 18px;
        --type-card: 16px;
    }
}