/* Xiaomo — jetons du système de design, charte « Encre et sceau ».
   Un seul accent : le vermillon du cachet. Tout le reste est papier et encre. */

:root {
  /* ---- couleurs (clair, valeurs de référence) */
  --paper: #F5F3EE;        /* fond, papier xuan */
  --surface: #FDFCFA;      /* cartes, tuiles */
  --surface-2: #EFECE5;    /* surfaces enfoncées, pistes de jauge */
  --ink: #1C1A17;          /* texte, encre pleine */
  --ink-2: #6B665E;        /* encre diluée : secondaire, légendes */
  --ink-3: #A39E94;        /* encre très diluée : désactivé, repères */
  --line: #E3DFD5;         /* filets */
  --line-2: #CFC9BC;       /* filets appuyés, bord des tuiles */
  --seal: #C1382C;         /* vermillon du sceau : action principale, acquis, série */
  --seal-ink: #96291F;     /* vermillon pressé */
  --seal-soft: #F6E3DF;    /* vermillon lavé : fond des états choisis */
  --jade: #2F7A62;         /* vert jade : la réponse est juste (le sceau reste vermillon) */
  --jade-soft: #E1EFE8;    /* jade lavé : fond de la tuile juste */
  --on-seal: #FFFDF9;      /* texte sur vermillon */
  --wrong: #6B665E;        /* faux = encre diluée + mouvement, jamais une autre couleur */
  --wrong-soft: #ECE9E2;
  --shadow: 0 1px 2px rgba(28,26,23,.06), 0 8px 24px -12px rgba(28,26,23,.18);
  --shadow-lift: 0 2px 4px rgba(28,26,23,.08), 0 18px 40px -16px rgba(28,26,23,.28);
  --focus: 0 0 0 3px rgba(193,56,44,.35);

  /* ---- typographie */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-zh: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-calli: "Ma Shan Zheng", "Noto Serif SC", serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px;
  --fs-22: 22px; --fs-28: 28px; --fs-36: 36px; --fs-48: 48px;
  --hz-s: 40px; --hz-m: 72px; --hz-l: 120px; --hz-xl: 168px;   /* tailles des caractères */
  --lh-tight: 1.1; --lh-text: 1.45; --tracking-label: .12em;

  /* ---- espacements, rayons */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-xl: 28px; --r-pill: 999px;
  --tap: 48px;                       /* taille minimale d'une cible au pouce */
  --gutter: 18px;                    /* marge latérale sur téléphone */

  /* ---- mouvement : seulement là où il porte du sens */
  --d-instant: 90ms;                 /* réponse à un geste */
  --d-quick: 180ms;                  /* changement d'état */
  --d-move: 320ms;                   /* transition d'écran, jauge */
  --d-slow: 600ms;                   /* bilan, cachet, coffre */
  --e-standard: cubic-bezier(.2,.7,.2,1);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-pop: cubic-bezier(.34,1.56,.64,1);   /* petit dépassement, pour l'apparition des récompenses */
  --e-in: cubic-bezier(.4,0,1,1);

  /* ---- sons et vibration (réglés dans ui.js, documentés ici)
     tick      : geste sur une tuile ou un bouton, 8 ms, très discret
     juste     : deux notes pentatoniques montantes, 180 ms
     faux      : note sourde unique, 120 ms, jamais agressive
     cachet    : coup mat, 90 ms, sur l'apposition du sceau
     coffre    : arpège pentatonique de 4 notes, 500 ms
     vibration : légère 10 ms (geste), juste [10,30,10], faux 40 ms
     musique   : nappe guqin/pipa à volume bas sur accueil, tracé, calligraphie, culture ;
                 silence sur écoute, oral, dictées, examens ; réglable par famille ;
                 coupée par défaut avant 9 ans. Morceaux libres de droits ou composés. */
}

/* Thème nuit : laque noire et or (encre ivoire, légendes dorées), le sceau garde son vermillon, le juste devient 青 (bleu-vert). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14120F; --surface: #1E1A16; --surface-2: #28231D; --ink: #EDE2C8; --ink-2: #C9A96A; --ink-3: #7A6A4A;
    --line: #3A3128; --line-2: #5A4B30; --seal: #D9564A; --seal-ink: #B8392E; --seal-soft: #3A2320; --on-seal: #FFFDF9; --jade: #5FB0A8; --jade-soft: #1B332F;
    --wrong: #A39E94; --wrong-soft: #2C2A26;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --paper: #14120F; --surface: #1E1A16; --surface-2: #28231D; --ink: #EDE2C8; --ink-2: #C9A96A; --ink-3: #7A6A4A;
  --line: #3A3128; --line-2: #5A4B30; --seal: #D9564A; --seal-ink: #B8392E; --seal-soft: #3A2320; --on-seal: #FFFDF9; --jade: #5FB0A8; --jade-soft: #1B332F;
  --wrong: #A39E94; --wrong-soft: #2C2A26;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-instant: 0ms; --d-quick: 0ms; --d-move: 0ms; --d-slow: 0ms; }
}