/* Palettes de couleur. Chargée APRÈS tribune.css et tribune-app.css.
 *
 * POURQUOI CE FICHIER EXISTE
 * public/tribune.css est l'extrait octet pour octet du bloc <style> de la
 * maquette v2, et une vérification du doctor échoue au moindre caractère
 * d'écart. Une palette de rechange ne peut donc pas s'y écrire. Elle vit ici,
 * et n'ajoute AUCUNE règle de mise en page : elle ne redéfinit que des jetons
 * de couleur déjà déclarés par la maquette.
 *
 * DEUX AXES INDÉPENDANTS, À NE PAS CONFONDRE
 *   1. le thème    : clair / sombre / système  -> data-theme,   clé tribune-theme
 *   2. la palette  : crème / moota             -> data-palette, clé tribune-palette
 * L'axe 1 existait avant ce fichier et n'est pas modifié. Les deux se
 * combinent : « bleu sombre » est un état valide, et chaque palette doit donc
 * fournir SES DEUX versions.
 *
 * LE PIÈGE DE SPÉCIFICITÉ, mesuré et non supposé
 * La maquette déclare le clair sur `:root` (0,1,0) et le sombre sur
 * `:root[data-theme="dark"]` (0,2,0). Un sélecteur `:root[data-palette="x"]`
 * pèse aussi (0,2,0) : à égalité, c'est l'ordre de chargement qui tranche, et
 * comme ce fichier est chargé après, les jetons CLAIRS d'une palette
 * écraseraient les jetons SOMBRES de la maquette. L'application serait sombre
 * avec un fond clair. D'où le `:not([data-theme="dark"])` sur chaque bloc
 * clair : (0,3,0), au-dessus des deux, et mutuellement exclusif avec le bloc
 * sombre correspondant. Ne pas retirer ce :not().
 *
 * CE QUI NE CHANGE JAMAIS D'UNE PALETTE À L'AUTRE
 * --ok, --no et leurs versions encre. Le vert veut dire adopté et le rouge
 * rejeté dans un procès-verbal : recolorer un état sémantique pour l'harmonie
 * visuelle ferait mentir l'écran. DESIGN.md le dit déjà : « Vert et rouge sont
 * réservés aux états de vote et de présence. » Seules leurs versions « soft »
 * suivent le fond, pour rester lisibles.
 *
 * AJOUTER UNE PALETTE
 * Copier les deux blocs `[data-palette="moota"]`, changer la valeur, ajouter
 * le bouton dans views/layout.eta. Rien d'autre.
 */

/* ------------------------------------------------------------------ *
 * MOOTA — clair
 *
 * Les couleurs ne sont pas inventées : elles sont échantillonnées au pixel
 * dans la référence donnée par Red (Background Moota Dashboard, Fahmi,
 * dribbble.com/shots/27185633), puis converties en oklch pour rester dans la
 * notation de la maquette.
 *   bloom haut-gauche  #96bbfb -> oklch(78.9% 0.100 261)
 *   champ              #dcedff -> oklch(93.9% 0.030 250)
 *   dérive lavande     #c9d5fe -> oklch(87.7% 0.058 272)
 *
 * Les rôles de la maquette sont CONSERVÉS, seules les valeurs changent :
 * --sun reste l'accent premier (il était jaune, il devient le bleu du bloom)
 * et --mand l'accent second (il était orange, il devient l'indigo lavande).
 * Renommer les jetons aurait obligé à toucher le balisage de tous les écrans.
 * ------------------------------------------------------------------ */
:root[data-palette="moota"]:not([data-theme="dark"]) {
  --canvas: oklch(94.5% 0.026 250);
  --canvas-2: oklch(89.6% 0.051 256);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.5% 0.012 252);
  --fg: oklch(20% 0.030 265);
  --fg-2: oklch(46% 0.030 265);
  --fg-3: oklch(61% 0.028 265);
  --line: oklch(88% 0.020 255);

  --sun: oklch(78.9% 0.100 261);
  --sun-deep: oklch(71% 0.120 259);
  --on-sun: oklch(20% 0.040 265);

  --mand: oklch(87.7% 0.058 272);
  --mand-deep: oklch(78% 0.090 276);
  --on-mand: oklch(20% 0.040 275);

  --ink: oklch(19% 0.025 265);
  --ink-2: oklch(26% 0.030 265);
  --on-ink: oklch(97% 0.010 250);

  --ok-soft: oklch(93% 0.055 150);
  --no-soft: oklch(93% 0.055 25);
  --info: oklch(62% 0.130 255);
  --info-soft: oklch(93% 0.040 252);
  --info-ink: oklch(40% 0.140 255);

  --shadow: 0 1px 2px oklch(35% 0.06 265/.06), 0 14px 36px oklch(38% 0.09 265/.13);
}

/* Le fond. La maquette compose déjà son ciel en trois couches sur <body> ;
   on garde exactement cette recette et on n'en change que les couleurs, pour
   que la référence se retrouve : bloom bleu au coin haut-gauche, dérive
   lavande au coin bas-droite, champ pâle en dessous.
   background-attachment:fixed est repris de la maquette : sans lui, le fond
   défile avec le contenu et le dégradé se répète en bandes sur une page
   longue comme l'écran d'aide. */
:root[data-palette="moota"]:not([data-theme="dark"]) body {
  background:
    radial-gradient(1150px 700px at 4% -8%, oklch(78.9% 0.100 261), transparent 62%),
    radial-gradient(820px 640px at 104% 106%, oklch(87.7% 0.058 272), transparent 58%),
    var(--canvas);
  background-attachment: fixed;
}

/* ------------------------------------------------------------------ *
 * MOOTA — sombre
 *
 * Même famille de teintes, portées en bas de luminosité. Les blooms sont
 * volontairement beaucoup plus sourds : transposé tel quel, le bleu à 79 % de
 * luminosité sur un fond à 14 % éclaire la moitié de l'écran et le texte des
 * cartes ne tient plus le contraste.
 * ------------------------------------------------------------------ */
:root[data-palette="moota"][data-theme="dark"] {
  --canvas: oklch(14% 0.022 265);
  --canvas-2: oklch(17.5% 0.030 262);
  --surface: oklch(20% 0.022 265);
  --surface-2: oklch(24% 0.024 265);
  --fg: oklch(95% 0.010 250);
  --fg-2: oklch(73% 0.016 255);
  --fg-3: oklch(57% 0.016 255);
  --line: oklch(29% 0.026 262);

  --sun: oklch(74% 0.110 261);
  --sun-deep: oklch(66% 0.120 259);
  --on-sun: oklch(15% 0.030 265);

  --mand: oklch(72% 0.090 276);
  --mand-deep: oklch(63% 0.110 278);
  --on-mand: oklch(15% 0.030 275);

  --ink: oklch(10% 0.020 265);
  --ink-2: oklch(16% 0.025 265);
  --on-ink: oklch(96% 0.008 250);

  --ok-soft: oklch(26% 0.060 150);
  --no-soft: oklch(26% 0.060 25);
  --info: oklch(66% 0.120 255);
  --info-soft: oklch(26% 0.050 252);
  --info-ink: oklch(82% 0.100 255);

  --shadow: 0 1px 2px oklch(0% 0 0/.5), 0 14px 36px oklch(0% 0 0/.55);
}

:root[data-palette="moota"][data-theme="dark"] body {
  background:
    radial-gradient(1150px 700px at 4% -8%, oklch(34% 0.075 261), transparent 62%),
    radial-gradient(820px 640px at 104% 106%, oklch(28% 0.055 276), transparent 58%),
    var(--canvas);
  background-attachment: fixed;
}
