/* ============================================================================
   tokens.css : transposition de la DA v3 de l'app goReviz.
   Sources : src/theme/palette/light.ts, dark.ts, constants.ts (dépôt revizapp)
   Contrat : docs/design/DA.md

   Notebook / papier / soft pop. Opaque, bordé, imprimé.
   Interdits : glassmorphism, blur, dégradé, shimmer, translucidité.

   Les valeurs ci-dessous sont celles de l'app, SANS DÉVIATION. La version
   précédente du site s'écartait de l'app sur trois valeurs (bordure, muted,
   pastels) parce que la palette sombre d'alors échouait au contraste WCAG. La
   DA v3 a refait cette palette : les seuils passent, l'écart n'a plus lieu
   d'être. Site et app sont de nouveau la même chose.
   ========================================================================== */

:root {
  /* ── Surfaces ────────────────────────────────────────────────────────────── */
  --bg: #FDFDF9;        /* Crème */
  --card: #FFFFFF;
  --raised: #FFFFFF;    /* Ce qui monte d'un cran (survol d'une carte neutre) */

  /* ── Loi 2 : l'encre suit le remplissage ─────────────────────────────────
     `ink`    borde une surface à remplissage CLAIR (pastel, crème).
     `border` borde une surface SOMBRE (en clair, il n'y en a pas : même valeur).
     C'est en mode sombre que les deux divergent : encre noire vs craie ivoire.
     Une bordure noire sur du graphite ne se voit pas ; une bordure ivoire sur
     du pastel non plus. La couleur du trait dépend du FOND, pas du thème.     */
  --ink: #18181B;
  --border: #18181B;
  --border-width: 2px;

  /* ── Texte posé sur une surface du THÈME ─────────────────────────────────── */
  --text: #18181B;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  --link: #5B4FC4;

  /* ── Texte posé sur un REMPLISSAGE pastel ────────────────────────────────
     Identique dans les deux palettes, et c'est tout l'intérêt : un pastel est
     une surface claire dans les deux thèmes (en sombre ils sont remontés, pas
     désaturés). Ce qu'on pose dessus ne bascule donc PAS avec le thème.
     Pas de `muted` : sur le pastel le plus foncé, un gris clair passe sous AA. */
  --on-fill: #18181B;
  --on-fill-secondary: #3F3F46;
  --on-fill-divider: rgba(24, 24, 27, 0.14);

  /* ── Pastels (les sept remplissages) ─────────────────────────────────────── */
  --yellow: #FFE9A3;
  --purple: #D4CCFC;
  --green: #A0E8AF;
  --pink: #FFB8C6;
  --blue: #A5D6FF;
  --mint: #B8EAD8;
  --orange: #FFD1A6;

  /* ── Le décalé riso (la couleur de l'ombre dure portée) ──────────────────
     En CLAIR ils valent tous l'encre : une seule ombre dure, depuis l'origine.
     C'est en SOMBRE qu'ils prennent une déclinaison foncée du pastel de la
     carte, parce qu'un bloc noir sur du graphite fait 1,2:1 : il est invisible. */
  --offset-yellow: var(--ink);
  --offset-purple: var(--ink);
  --offset-green: var(--ink);
  --offset-pink: var(--ink);
  --offset-blue: var(--ink);
  --offset-mint: var(--ink);
  --offset-orange: var(--ink);
  --offset-neutral: var(--ink);

  /* ── L'ombre dure d'une surface NEUTRE ───────────────────────────────────
     Décalage 4/4, rayon 0, opacité 1. Aucun flou, jamais.
     En sombre, elle passe à `none` : voir plus bas, c'est toute la loi.        */
  --shadow-neutral: 4px 4px 0 var(--offset-neutral);
  --shadow-neutral-lifted: 6px 6px 0 var(--offset-neutral);

  /* ── Le coin tranché ─────────────────────────────────────────────────────
     Coupe à 45° sur 22 px, coin haut-droit, les trois autres arrondis à 16 px.
     UNE SEULE carte par page le porte : c'est le seul marqueur de hiérarchie.

     Deux pièges, tous deux payés une fois :

     1. `clip-path` ne connaît pas les arrondis. Poser un sommet à 16 px sur les
        trois autres coins les CHANFREINE au lieu de les laisser ronds. Ils
        restent donc à angle droit dans le polygone, et c'est `border-radius`
        qui fait son travail par-dessus.

     2. La face intérieure ne coupe pas 20 px, mais 21. Un inset de 2 px sur une
        diagonale à 45° retire 2·√2 ≈ 2,83 px, pas 2. Un « 20 » à la louche
        épaissit visiblement le liseré d'encre sur la seule diagonale.          */
  --cut: 22px;
  --cut-inner: 21px;
  --cut-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  --cut-path-inner: polygon(0 0, calc(100% - var(--cut-inner)) 0, 100% var(--cut-inner), 100% 100%, 0 100%);

  /* ── Typographie. L'app utilise `System` : on garde la pile native. ──────── */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-h1: 2rem;         /* 32 / 40 */
  --lh-h1: 2.5rem;
  --fs-h2: 1.5rem;       /* 24 / 32 */
  --lh-h2: 2rem;
  --fs-h3: 1.25rem;      /* 20 / 28 */
  --lh-h3: 1.75rem;
  --fs-body: 1rem;       /* 16 / 24 */
  --lh-body: 1.5rem;
  --fs-small: 0.875rem;  /* 14 / 20 */
  --lh-small: 1.25rem;
  --fs-caption: 0.75rem; /* 12 / 16 */
  --lh-caption: 1rem;

  /* ── Espacements ─────────────────────────────────────────────────────────── */
  --s-xs: 4px;
  --s-s: 8px;
  --s-m: 16px;
  --s-l: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;

  /* ── Rayons ──────────────────────────────────────────────────────────────── */
  --r-s: 8px;
  --r-m: 16px;   /* Le rayon de LA carte. */
  --r-l: 24px;
  --r-inner: 14px; /* 16 - 2 : la face d'une carte tranchée, en inset de 2 px. */

  /* ── Motion : l'appui est le seul mouvement. 90 ms. ──────────────────────── */
  --press: 90ms;

  /* Mesure de lecture : 65 à 75 caractères pour du texte juridique long. */
  --measure: 680px;
}

/* ── Mode sombre : le graphite ──────────────────────────────────────────────
   L'ancienne base était un navy (#1A1A2E) avec des pastels désaturés : une
   inversion du clair, qui échouait au contraste. La nouvelle est un GRAPHITE
   CHAUD, pensé comme un carnet noirci. Les pastels y sont REMONTÉS : ils
   restent des remplissages CLAIRS, avec de l'encre noire dessus.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14120F;      /* Graphite chaud (papier noirci) */
    --card: #1F1D19;
    --raised: #26231E;  /* Une carte sombre monte en s'ÉCLAIRCISSANT. */

    /* Loi 2 : ici les deux divergent. */
    --ink: #0A0908;     /* Borde un remplissage pastel. */
    --border: #7A7266;  /* Craie. Borde une surface sombre. 3,5:1 sur la carte. */

    --text: #F2EFE8;    /* Ivoire, pas blanc pur : le blanc vibre sur graphite. */
    --text-secondary: #C4BEB2;
    --text-muted: #8A8378;
    --link: #B9AEFF;

    /* Inchangés : la surface sous eux ne bascule pas. */
    --on-fill: #18181B;
    --on-fill-secondary: #3F3F46;
    --on-fill-divider: rgba(24, 24, 27, 0.14);

    /* Pastels remontés : toujours des remplissages clairs. */
    --yellow: #FFD98A;
    --purple: #B9AEFF;
    --green: #7FE3A0;
    --pink: #FFA3B5;
    --blue: #8FCBFF;
    --mint: #93DEC4;
    --orange: #FFC183;

    /* Le décalé riso prend la teinte foncée du pastel de sa carte. */
    --offset-yellow: #8A6F2E;
    --offset-purple: #574BC0;
    --offset-green: #2F7A4B;
    --offset-pink: #A34A5E;
    --offset-blue: #3B6FA8;
    --offset-mint: #35806A;
    --offset-orange: #9C6329;

    /* ── L'ombre dure est un procédé de MODE CLAIR ─────────────────────────
       Un bloc noir décalé de 4 px sur #14120F a un contraste de 1,2:1 : il est
       invisible. La sortie n'est pas de l'éclaircir (elle cesserait de lire
       comme une ombre pour lire comme une lueur), c'est d'admettre qu'elle
       n'existe pas ici. Une surface NEUTRE ne porte donc aucune ombre en
       sombre : elle monte en s'éclaircissant (--card -> --raised).
       Seul un REMPLISSAGE pastel porte encore un décalé, dans sa propre teinte
       foncée. C'est pour ça que les deux ombres sont séparées.                */
    --shadow-neutral: none;
    --shadow-neutral-lifted: none;
  }
}