/* ════════════════════════════════════════════════════════════════════
   LES TEINTES (skins)
   Une teinte change UNIQUEMENT l'apparence : couleurs, polices, reliefs.
   Le fonctionnement reste exactement le même.

   Trois teintes, pas plus : Salon (le jour), Nuit (le mode sombre), Papier.
   Pour en changer une : modifie ses couleurs ici. Pour en remplacer une,
   copie un bloc, change le nom, puis mets-la dans la liste TEINTES de app.js.
   ════════════════════════════════════════════════════════════════════ */

/* ─── SALON (par défaut) : d'après la pochette « For A Good Time… » d'Odeal.
   Mur gris clair de studio, velours bleu Klein, noyer, aluminium, plexi fumé, cuir cognac. ─── */
:root, [data-teinte="salon"] {
  --etiquette: "Instrument Sans", system-ui, sans-serif;   /* les petites inscriptions de l'appareil */
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fond: #dcdbd8;
  --fond-2: #e9e8e5;
  --fond-3: #f3f2ef;
  --fond-image: radial-gradient(90% 70% at 50% -10%, rgba(255,255,255,.6), transparent 70%), linear-gradient(180deg, transparent 72%, rgba(184,113,47,.06));
  --encre: #1c1c21;
  --encre-2: #63626a;
  --encre-3: rgba(28, 28, 33, .2);
  --trait: rgba(28, 28, 33, .12);

  --verre-fond: #cfcecb;
  --verre-eteint: #bdbcb8;
  --aiguille: #1b3cc4;
  --sur-aiguille: #ffffff;

  --capuchon-haut: #f6f5f2;
  --capuchon-bas: #b5b3ae;

  --relief: 0 1px 0 rgba(255,255,255,.75) inset, 0 8px 22px rgba(45,38,30,.13);
  --relief-fort: 0 1px 0 rgba(255,255,255,.8) inset, 0 26px 56px rgba(45,38,30,.22), 0 4px 10px rgba(45,38,30,.08);
  --relief-enfonce: inset 0 3px 10px rgba(0,0,0,.18);
  --relief-plein: 0 10px 24px rgba(27,30,60,.22);
  --ombre-pochette: 0 6px 16px rgba(45,32,20,.22);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --display-poids: 400;
  --display-interlettre: -0.012em;
  --texte: "Instrument Sans", system-ui, sans-serif;

  --rayon-objet: 18px;
  --rayon-pochette: 2px;
  --rayon-ecran: 8px;

  /* la chaîne : alu brossé, écran bleu glacier */
  --hifi-corps: linear-gradient(180deg, rgba(255,255,255,.6), transparent 16%), repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.022) 1px 2px), linear-gradient(180deg, #eceded, #d3d5d7 48%, #c5c7ca 52%, #dfe1e3);
  --hifi-encre: #24262b;
  --hifi-trait: rgba(0,0,0,.12);
  --hifi-ombre: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.08) inset, 0 28px 60px rgba(45,38,30,.25), 0 6px 14px rgba(45,38,30,.12);
  --hifi-creux: #1d1e22;
  --hifi-porte: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 2px), linear-gradient(180deg, #e8e9ea, #c9cbce);
  --hifi-anneau: #c9cbce;
  --hifi-bouton: radial-gradient(circle at 50% 30%, #ffffff, #e2e3e5 45%, #b9bcc0);
  --hifi-bouton-ombre: 0 3px 6px rgba(0,0,0,.25), inset 0 1px 0 #fff, inset 0 -2px 3px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.08);
  --hifi-bouton-enfonce: inset 0 2px 5px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.1);
  --hifi-bouton-fort: radial-gradient(circle at 50% 30%, #3a3d44, #1c1e22);
  --hifi-sur-fort: #f2f3f4;
  --lcd-fond: radial-gradient(120% 140% at 50% 0%, #0d2235, #06111c 70%);
  --lcd-encre: #8fdcff;
  --lcd-halo: rgba(110, 200, 255, .55);
}

/* ─── NUIT : le même salon, lampe allumée. Mur sombre, noyer, velours bleu,
   afficheur ambré. C'est le mode sombre du site. ─── */
[data-teinte="nuit"] {
  --fond: #141318;
  --fond-2: #1d1c22;
  --fond-3: #27262d;
  --fond-image: radial-gradient(70% 55% at 12% -8%, rgba(255, 170, 90, .10), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(40, 70, 220, .10), transparent 70%);
  --encre: #ecebe6;
  --encre-2: #a09ea9;
  --encre-3: rgba(236, 235, 230, .2);
  --trait: rgba(236, 235, 230, .1);

  --verre-fond: #0d0d11;
  --verre-eteint: #2b2a33;
  --aiguille: #5470ff;
  --sur-aiguille: #0b0d22;

  --capuchon-haut: #e4e2dd;
  --capuchon-bas: #8c8a85;

  --relief: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px rgba(0,0,0,.45);
  --relief-fort: 0 1px 0 rgba(255,255,255,.06) inset, 0 26px 60px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.3);
  --relief-enfonce: inset 0 3px 10px rgba(0,0,0,.6);
  --relief-plein: 0 10px 24px rgba(0,0,0,.45);
  --ombre-pochette: 0 6px 16px rgba(0,0,0,.5);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --display-poids: 400;
  --display-interlettre: -0.012em;
  --texte: "Instrument Sans", system-ui, sans-serif;

  --rayon-objet: 18px;
  --rayon-pochette: 2px;
  --rayon-ecran: 8px;

  /* la chaîne : laque noire, écran ambré */
  --hifi-corps: linear-gradient(180deg, rgba(255,255,255,.08), transparent 16%), linear-gradient(180deg, #2a2b30, #17181b 60%, #101114);
  --hifi-encre: #e8e8ea;
  --hifi-trait: rgba(255,255,255,.08);
  --hifi-ombre: 0 1px 0 rgba(255,255,255,.08) inset, 0 28px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  --hifi-creux: #050506;
  --hifi-porte: linear-gradient(180deg, #26272c, #131417);
  --hifi-anneau: #1e1f23;
  --hifi-bouton: radial-gradient(circle at 50% 30%, #4a4c53, #2a2b30 55%, #1a1b1f);
  --hifi-bouton-ombre: 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.4);
  --hifi-bouton-enfonce: inset 0 2px 6px rgba(0,0,0,.6);
  --hifi-bouton-fort: radial-gradient(circle at 50% 30%, #f0f0f2, #b9bbc0);
  --hifi-sur-fort: #141518;
  --lcd-fond: radial-gradient(120% 140% at 50% 0%, #1a0f05, #0a0603 70%);
  --lcd-encre: #ffb35c;
  --lcd-halo: rgba(255, 160, 70, .55);
}

/* ─── PAPIER : une archive privée, papier vert-de-gris, encre bleue, tampon magenta ─── */
[data-teinte="papier"] {
  --fond: #dfe4d7;
  --fond-2: #eef1e8;
  --fond-3: #d3dacb;
  --fond-image: none;
  --encre: #1d2a4d;
  --encre-2: #5a6680;
  --encre-3: rgba(29, 42, 77, .25);
  --trait: rgba(29, 42, 77, .14);

  --verre-fond: #f6f7f1;
  --verre-eteint: rgba(29, 42, 77, .15);
  --aiguille: #d01e6a;
  --sur-aiguille: #f6f7f1;

  --capuchon-haut: #1d2a4d;
  --capuchon-bas: #2c3c66;

  --relief: 0 0 0 1px rgba(29,42,77,.18);
  --relief-fort: 0 0 0 1px rgba(29,42,77,.22), 6px 6px 0 rgba(29,42,77,.12);
  --relief-enfonce: 0 0 0 2px var(--aiguille);
  --relief-plein: none;
  --ombre-pochette: 0 0 0 1px rgba(29,42,77,.2);

  --display: "Newsreader", Georgia, serif;
  --display-poids: 400;
  --display-interlettre: -0.025em;
  --texte: "Instrument Sans", system-ui, sans-serif;

  --rayon-objet: 2px;
  --rayon-pochette: 0px;
  --rayon-ecran: 0px;

  /* la chaîne : à plat, à l'encre */
  --hifi-corps: #eef1e8;
  --hifi-encre: #1d2a4d;
  --hifi-trait: rgba(29,42,77,.18);
  --hifi-ombre: 0 0 0 1px rgba(29,42,77,.25), 8px 8px 0 rgba(29,42,77,.12);
  --hifi-creux: #1d2a4d;
  --hifi-porte: #e3e8dc;
  --hifi-anneau: #d3dacb;
  --hifi-bouton: #f6f7f1;
  --hifi-bouton-ombre: 0 0 0 1.5px #1d2a4d;
  --hifi-bouton-enfonce: 0 0 0 2px #d01e6a;
  --hifi-bouton-fort: #1d2a4d;
  --hifi-sur-fort: #f6f7f1;
  --lcd-fond: #1d2a4d;
  --lcd-encre: #f6f7f1;
  --lcd-halo: transparent;
}