/* Tokens : la seule feuille où des couleurs sont écrites.
   Palette « Nuit de cinéma » : une salle obscure, indigo profond, et l'ambre
   des affiches pour tout ce qui est actif.
     #0F1320 nuit    → page
     #1B2233 ardoise → faces avant, en-tête d'article
     #929BB3 gris    → arêtes, texte secondaire (5,7:1 sur une face)
     #E8EAF2 blanc   → texte
     #F0B94A ambre   → colonne active du menu, morceau en cours, bouton de
                       lecture, notes des films, liens, jamais un cube
     #2A3450 relevé  → tuiles « note », cube choisi (face plus claire)
     #34456B indigo  → cubes de genre musical
   Les teintes dérivées : les autres faces d'une boîte (dessus éclairé, flancs
   assombris), le fond des blocs de code (plus sombre que la page). */

:root {
  /* Surfaces et texte (brief §12) */
  --surface-face:  #1b2233;   /* face avant */
  --surface-page:  #0f1320;
  --text-primary:  #e8eaf2;
  --text-muted:    #929bb3;
  --border:        rgba(146, 155, 179, .55);   /* filet de la face avant, filets */

  /* Volume d'une boîte : lumière venue du haut à gauche. Le dessus est plus
     clair que la face avant, la gauche et l'arrière un peu plus sombres, la
     droite encore plus, le dessous le plus sombre. Chaque flanc porte le même
     trait fin (--edge) : c'est le contour du cube, lisible même là où deux
     faces sombres se touchent. La face avant a en plus un liseré clair sur
     son arête haute (--edge-light). */
  --surface-top:   #262f47;   /* dessus */
  --surface-side:  #151a29;   /* gauche, arrière */
  --surface-dark:  #10141f;   /* droite */
  --surface-under: #0b0e18;   /* dessous */
  --edge:          rgba(146, 155, 179, .38);
  --edge-light:    rgba(232, 234, 242, .08);
  --radius-tile:   10px;
  --gap:           12px;
  --dur-roll:      360ms;     /* un quart de tour, miroir de TURN_DURATION */

  /* Surfaces secondaires. Jamais d'ambre sur un cube : une tuile « note » et
     le cube choisi sont une boîte « relevée », plus claire que les autres, et
     le cube choisi porte en plus un cadre clair. */
  --surface-lift:  #2a3450;   /* tuiles « note », cube choisi : face avant */
  --surface-lift-top: #3a4766;
  --surface-lift-side: #202942;
  --surface-lift-dark: #1c2439;
  --text-on-lift-muted: #a9b1c6;
  --outline-active: #e8eaf2;  /* cadre du cube choisi */
  --surface-note:  #f0b94a;   /* ambre : morceau en cours, bouton de lecture,
                                 note d'un film, Enregistrer, jamais un cube */
  --text-on-note:  #0f1320;
  --text-on-note-muted: #4a3f22;
  --surface-genre: #34456b;   /* cubes de genre musical : indigo, pour ne pas
                                 les confondre avec les cubes de sous-genre */
  --surface-genre-top: #45598a;
  --surface-genre-side: #2c3a5b;   /* gauche, arrière */
  --surface-genre-dark: #263351;   /* droite */
  --surface-genre-under: #1a2338;  /* dessous */
  --text-on-genre: #e8eaf2;
  --surface-code:  #0b0e18;   /* blocs de code, champs de saisie */
  --accent:        #f0b94a;   /* liens dans un texte, curseur de lecture */
  --danger:        #ec8474;   /* corail : ce qui supprime ou ferme (6,1:1 sur
                                 une face) ; même chroma que l'ambre, la teinte
                                 seule change */
  --text-on-danger: #0f1320;
  --menu-active-bg: #f0b94a;
  --menu-active-fg: #0f1320;
  --focus-ring:    #f0b94a;
  --backdrop:      rgba(15, 19, 32, .8);   /* voile derrière une boîte de dialogue */

  /* Fond « mer » (js/water.js) : le canvas sous la page ondule entre ces deux
     teintes, à ±3 % de luminosité de la page, même teinte, rien de plus
     clair, rien de plus bleu. */
  --water-base:    #0f1320;   /* = --surface-page */
  --water-crest:   #141a2b;   /* crête */
  --water-trough:  #0a0d16;   /* creux */

  /* Typographie : une famille, deux graisses, trois tailles */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-s: 13px;
  --fs-m: 15px;
  --fs-l: 22px;
  --fw-regular: 400;
  --fw-medium: 500;

  /* Durées et courbes secondaires */
  --dur-fade: 180ms;
  --dur-flip: 420ms;
  --dur-nav: 250ms;           /* descente des colonnes du menu, volet mobile */
  --ease-flip: cubic-bezier(.2, .7, .3, 1);

  /* Mise en page */
  --page-max: 1200px;
  --page-pad: 16px;
  --nav-height: 56px;
  --stage-pad-x: 40px;
  --stage-pad-y: 32px;

  /* Vue oblique de la scène (voir .grid dans layout.css) : identique pour
     toutes les boîtes. view-y montre le côté droit, view-x le dessus. Les
     faces avant sont resserrées de cos(view-y) en largeur et décalées de
     D/2·sin(view-y) vers la gauche : la marge de la scène doit l'absorber. */
  --view-x: 8deg;
  --view-y: 14deg;

  color-scheme: dark;
}

@media (max-width: 479.98px) {
  :root {
    --stage-pad-x: 20px;
    --stage-pad-y: 28px;
    --view-x: 5deg;
    --view-y: 7deg;
  }
}

/* Tokens clairs : déclarés, jamais activés (aucun basculement câblé). */
[data-theme="light"] {
  --surface-face:  #f7f6f3;
  --surface-page:  #fdfdfc;
  --text-primary:  #1f1f1d;
  --text-muted:    #6b6a65;
  --border:        rgba(0, 0, 0, .18);
  --surface-top:   #ffffff;
  --surface-side:  #e8e6e0;
  --surface-dark:  #d9d6ce;
  --surface-under: #cbc7bd;
  --edge:          rgba(0, 0, 0, .14);
  --edge-light:    rgba(255, 255, 255, .6);
  --surface-lift:  #ffffff;
  --surface-lift-top: #ffffff;
  --surface-lift-side: #edebe5;
  --surface-lift-dark: #e0ddd5;
  --text-on-lift-muted: #6b6a65;
  --outline-active: #1f1f1d;
  --surface-note:  #f1efe8;
  --text-on-note:  #1f1f1d;
  --text-on-note-muted: #6b6a65;
  --surface-genre: #e3d9c4;
  --surface-genre-top: #efe8d8;
  --surface-genre-side: #d3c9b3;
  --surface-genre-dark: #c6bba3;
  --surface-genre-under: #b8ad95;
  --text-on-genre: #1f1f1d;
  --surface-code:  #efede8;
  --accent:        #1f6f7a;
  --danger:        #b8433a;
  --text-on-danger: #fdfdfc;
  --menu-active-bg: #1f1f1d;
  --menu-active-fg: #fdfdfc;
  --focus-ring:    #1f1f1d;
  --backdrop:      rgba(31, 31, 29, .5);
  --water-base:    #fdfdfc;
  --water-crest:   #ffffff;
  --water-trough:  #f3f3f0;
  color-scheme: light;
}