/* =====================================================================
   app/css/tokens.css — la couche de tokens APPLICATIFS de l'Atelier.
   (Vague UX, lot 2 — DIRECTION-UX.md fait foi.)

   Au-dessus de la charte générée (theme.css, intouchable) : ce que la
   charte ne dit pas. Doctrine :
   · Les composants ne consomment JAMAIS un token de charte brut pour un
     état interactif — uniquement les quintets ci-dessous.
   · Les SURFACES pleines sont CONSTANTES entre thèmes (valeurs profondes
     du thème clair, prouvées AA avec leur encre `-on`) ; seuls les
     TEXTES (`-text`) basculent vers les pastels en sombre.
   · L'or ne remplit jamais (pas de -surface) : il souligne, cercle, appose.
   Contrat AA verrouillé par app/tests/contraste.test.js.
   ===================================================================== */
:root {
  /* ---- Quintets de pigment (a=bleu nuit, b=garance, c=vert, d=ocre, e=violet) ---- */
  --a-surface: #1F3A5F; --a-on: #fff; --a-text: var(--c-a);
  --a-tint: color-mix(in srgb, var(--c-a) 10%, var(--card));
  --a-line: color-mix(in srgb, var(--c-a) 45%, var(--hairline));
  --b-surface: #8C2F2A; --b-on: #fff; --b-text: var(--c-b);
  --b-tint: color-mix(in srgb, var(--c-b) 9%, var(--card));
  --b-line: color-mix(in srgb, var(--c-b) 45%, var(--hairline));
  --c-surface: #2E5E4E; --c-on: #fff; --c-text: var(--c-c);
  --c-tint: color-mix(in srgb, var(--c-c) 10%, var(--card));
  --c-line: color-mix(in srgb, var(--c-c) 45%, var(--hairline));
  --d-surface: #9A6A2F; --d-on: #fff; --d-text: #7d5526;
  --d-tint: color-mix(in srgb, var(--c-d) 11%, var(--card));
  --d-line: color-mix(in srgb, var(--c-d) 45%, var(--hairline));
  --e-surface: #4A3A6B; --e-on: #fff; --e-text: var(--c-e);
  --e-tint: color-mix(in srgb, var(--c-e) 10%, var(--card));
  --e-line: color-mix(in srgb, var(--c-e) 45%, var(--hairline));
  --n-surface: #3C4257; --n-on: #fff;                    /* neutre (codes, méta) */

  /* ---- Rôles sémantiques (DIRECTION §2.2) ---- */
  --ok-surface: #2E5E4E; --ok-on: #fff; --ok-text: var(--method);
  --ok-tint: color-mix(in srgb, var(--method) 10%, var(--card));
  --ok-line: color-mix(in srgb, var(--method) 40%, var(--hairline));
  --danger-surface: #B23A2E; --danger-on: #fff; --danger-text: var(--danger);
  --danger-tint: color-mix(in srgb, var(--danger) 8%, var(--card));
  --danger-line: color-mix(in srgb, var(--danger) 40%, var(--hairline));
  --warn-bg: var(--enjeu); --warn-ink: var(--enjeu-ink);
  --warn-line: color-mix(in srgb, var(--gold) 40%, var(--hairline));
  --react-surface: #bf7d3a; --react-on: #1B2233;         /* ambre méthode des J : encre sombre (4,69) */
  --react-text: #8a5a26;
  --react-tint: color-mix(in srgb, #bf7d3a 12%, var(--card));
  --gold-text: #8a6a33;                                  /* l'or-texte AA en clair (le token brut échoue à 2,88) */
  --gold-tint: color-mix(in srgb, var(--gold) 10%, var(--card));
  --gold-line: color-mix(in srgb, var(--gold) 45%, var(--hairline));

  /* ---- Années (pilules L1/L2/L3 — y1 échouait même en clair) ---- */
  --y1-surface: #35597c; --y2-surface: #2b567c; --y3-surface: #1E456A; --y-on: #fff;

  /* ---- Échelle typographique (10 crans — DIRECTION §3) ---- */
  --t-caption: 11.5px; --t-small: 12.5px; --t-ui: 13.5px; --t-body: 15px;
  --t-lecture: 16.5px; --t-h4: 17px; --t-h3: 19px; --t-h2: 22px;
  --t-h1: clamp(24px, 3vw, 32px); --t-display: clamp(30px, 4vw, 42px);
  --t-num: clamp(34px, 8vw, 56px);

  /* ---- Grille de 4, rayons, gabarits (DIRECTION §4) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 18px; --r-round: 999px;
  --gab-focus: 640px; --gab-lecture: 760px; --gab-large: 920px; --gab-atelier: 1080px;

  /* ---- Mouvement (DIRECTION §5) ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Élévation ---- */
  --elev-1: var(--shadow);
  --elev-2: 0 18px 50px rgba(0, 0, 0, .28);
}

html.theme-dark {
  /* Textes pastels : la charte les fournit déjà via ses tokens retournés ;
     seules les valeurs littérales du clair sont surchargées ici. */
  --d-text: #d2ac6b;
  --react-text: #d9a267;
  --gold-text: #caa867;
  --elev-2: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ---- L'accent de famille : posé par le routeur (data-fam sur #view) ---- */
#view, .greffier-panel {
  --accent-surface: var(--a-surface); --accent-on: var(--a-on);
  --accent-text: var(--a-text); --accent-tint: var(--a-tint); --accent-line: var(--a-line);
}
#view[data-fam='methode'] {
  --accent-surface: var(--b-surface); --accent-on: var(--b-on);
  --accent-text: var(--b-text); --accent-tint: var(--b-tint); --accent-line: var(--b-line);
}
#view[data-fam='memoire'], #view[data-fam='organisation'], #view[data-fam='calendrier'] {
  --accent-surface: var(--c-surface); --accent-on: var(--c-on);
  --accent-text: var(--c-text); --accent-tint: var(--c-tint); --accent-line: var(--c-line);
}
#view[data-fam='redevabilite'], #view[data-fam='pilotage'] {
  --accent-surface: var(--e-surface); --accent-on: var(--e-on);
  --accent-text: var(--e-text); --accent-tint: var(--e-tint); --accent-line: var(--e-line);
}
#view[data-fam='reference'] {
  --accent-surface: var(--d-surface); --accent-on: var(--d-on);
  --accent-text: var(--d-text); --accent-tint: var(--d-tint); --accent-line: var(--d-line);
}

/* La vue traverse seule au changement de route (View Transitions, lot 4). */
#view { view-transition-name: vue; }

/* ---- Utilitaires transverses ---- */
.num { font-variant-numeric: tabular-nums; }