/* pepi — tokens.css : le système visuel de la refonte d'octobre 2026
   (maquettes Claude Design, « pepi — système visuel », planches 1 à 6).
   Chargé AVANT toute autre feuille : les modules ne lisent que ces jetons.

   Les fontes sont servies même-origine depuis /static/vendor (la CSP prod
   interdit tout CDN) : trois woff2 variables, sous-ensemble latin, licence
   OFL (vendor/pepi-fonts-1/OFL.txt). */

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/vendor/pepi-fonts-1/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/vendor/pepi-fonts-1/instrument-sans-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/vendor/pepi-fonts-1/newsreader.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/vendor/pepi-fonts-1/newsreader-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/vendor/pepi-fonts-1/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Trois voix, une par interlocuteur : l'interface parle en sans, pepi
     raconte en romain, la machine s'affiche en chasse fixe. */
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-machine: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle — base 16 px, rapport ≈ 1,2, aucun texte d'interface sous 12 px. */
  --fs-display: 2.125rem;   --lh-display: 2.5rem;
  --fs-title: 1.375rem;     --lh-title: 1.75rem;
  --fs-heading: 1.0625rem;  --lh-heading: 1.5rem;
  --fs-read: 1.0625rem;     --lh-read: 1.75rem;
  --fs-body: .9375rem;      --lh-body: 1.375rem;
  --fs-input: 1rem;         --lh-input: 1.5rem;
  --fs-small: .8125rem;     --lh-small: 1.125rem;
  --fs-label: .75rem;       --lh-label: 1rem;
  --fs-mono: .8125rem;      --lh-mono: 1.25rem;
  --fw-regular: 450; --fw-medium: 500; --fw-strong: 650;

  /* Formes : rayon intérieur = rayon extérieur − marge. */
  --r-1: 6px;  --r-2: 10px; --r-3: 14px;
  --r-4: 20px; --r-5: 28px; --r-full: 999px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;
  --hit: 44px; --gutter: 16px; --measure: 42rem;
  --rail: 248px;
  --safe-bottom: max(12px, env(safe-area-inset-bottom));

  /* Mouvement : ce qui entre décélère, ce qui sort accélère. */
  --dur-press: 100ms; --dur-in: 200ms; --dur-sheet: 280ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-loop: cubic-bezier(.45, .05, .55, .95);

  /* Couleurs — clair. Tout texte ≥ 4,5:1 sur le papier ; --ink-4 n'écrit
     jamais de texte (filets, icônes désactivées). */
  --paper: #F4F2EB;          --paper-sunk: #ECE9E0;
  --surface: #FBFAF6;        --surface-raised: #FFFEFB;
  --line: #E2DED3;           --line-strong: #CEC9BC;
  --ink: #1F1E1A;            --ink-2: #4A473F;
  --ink-3: #6B675E;          --ink-4: #A39E92;
  --accent: #35664C;         --accent-strong: #2A5340;
  --accent-text: #2F5D45;    --on-accent: #FFFFFF;
  --accent-soft: #E3EDE6;    --accent-line: #BCD3C4;
  --danger: #B3423F;         --danger-solid: #B3423F;
  --on-danger: #FFFFFF;      --danger-soft: #F7E5E2;
  --danger-line: #E9C4BF;
  --warn: #8A5A00;           --warn-soft: #F5EAD2;
  --warn-line: #E6CF9E;
  --shadow-rest: 0 1px 2px rgb(31 30 26 / .06),
                 0 0 0 1px rgb(31 30 26 / .02);
  --shadow-float: 0 2px 4px rgb(31 30 26 / .05),
                  0 16px 40px -10px rgb(31 30 26 / .22);
  --scrim: rgb(31 30 26 / .32);

  /* Noms hérités d'avant la refonte : les modules pas encore repris les
     lisent encore. Ils ne pointent plus que vers les jetons ci-dessus — un
     module repris les abandonne, et ce bloc rétrécit avec eux. */
  --bg: var(--paper);
  --border: var(--line);
  --text: var(--ink);
  --muted: var(--ink-3);
  --accent-2: var(--accent-strong);
  --error: var(--danger);
  --error-bg: var(--danger-soft);
  --code-bg: var(--paper-sunk);
  --shadow: var(--shadow-rest);
  --shadow-pop: var(--shadow-float);
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}

/* Le même papier, la nuit : la teinte reste chaude au lieu de virer à
   l'ardoise ; l'élévation se lit à la clarté de la surface, pas à l'ombre. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131411;          --paper-sunk: #0E0F0D;
    --surface: #1B1D19;        --surface-raised: #23261F;
    --line: #2D302A;           --line-strong: #3C4038;
    --ink: #ECEAE3;            --ink-2: #C3BFB4;
    --ink-3: #979386;          --ink-4: #5E5B53;
    --accent: #86B89A;         --accent-strong: #9CC8AD;
    --accent-text: #8EC0A2;    --on-accent: #0F1A13;
    --accent-soft: #1D2B22;    --accent-line: #2F4A3A;
    --danger: #EE958B;         --danger-solid: #E07A70;
    --on-danger: #1E0D0B;      --danger-soft: #2E1A17;
    --danger-line: #5A2C27;
    --warn: #E3B562;           --warn-soft: #2A2314;
    --warn-line: #5A4720;
    --shadow-rest: inset 0 1px 0 rgb(255 255 255 / .04);
    --shadow-float: inset 0 1px 0 rgb(255 255 255 / .06),
                    0 18px 44px -10px rgb(0 0 0 / .7);
    --scrim: rgb(0 0 0 / .56);
  }
}

/* --- Icônes : un sprite inline (app-icons.js), <svg class="ic"><use href="#i-envoyer"/></svg>.
   Trait 1,75 sur grille 24, 2,1 sur fond plein ; elles se colorent comme du texte. */
.ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.ic--14 { width: 14px; height: 14px; }
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--22 { width: 22px; height: 22px; }
.ic--24 { width: 24px; height: 24px; }
.ic--bold { stroke-width: 2.1; }
.ic--fill { fill: currentColor; stroke: none; }

.voice { font: 400 var(--fs-read)/var(--lh-read) var(--font-voice); }
.machine {
  font: var(--fw-regular) var(--fs-mono)/var(--lh-mono) var(--font-machine);
  color: var(--ink-3);
}
.label {
  font: var(--fw-strong) var(--fs-label)/var(--lh-label) var(--font-ui);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Le point de pepi : il respire au repos (accueil seulement), un
   satellite tourne autour quand il travaille, il se rattache en gris. */
.pp-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 20px; height: 20px;
}
.pp-dot::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pp-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 1.5px, var(--accent) 1.5px, transparent 2px);
  opacity: 0;
}
.pp-dot.working::after { opacity: 1; animation: pp-spin 1.2s var(--ease-loop) infinite; }
.pp-dot.reattach::before { background: var(--accent-line); box-shadow: 0 0 0 3px var(--paper-sunk); }
.pp-dot.reattach::after {
  opacity: 1;
  background: radial-gradient(circle at 50% 1.5px, var(--ink-3) 1.5px, transparent 2px);
  animation: pp-spin 2.6s linear infinite;
}
.pp-dot.done::before { box-shadow: none; }
.pp-breathe { animation: pp-breathe 3.2s ease-in-out infinite; }

/* Reflet qui glisse sur la phrase en cours : un seul élément bouge à la fois. */
.pp-sheen {
  background-image: linear-gradient(90deg, var(--ink-3) 0%, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%, var(--ink-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pp-sheen 2.4s linear infinite;
}

@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes pp-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes pp-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes pp-live { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes pp-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Les boucles se figent : le point reste plein, la phrase fixe, l'onde
   devient une barre de niveau ; les transitions deviennent un fondu court. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-in: 120ms; --dur-sheet: 120ms; }
  .pp-dot::after, .pp-breathe, .pp-wave span, .pp-live { animation: none !important; }
  .pp-sheen { animation: none; background: none; color: var(--ink-2); }
}