/* ==========================================================================
   tokens · DA artishoc classique (référence : filage.artishoc.coop)
   Toute valeur de couleur, typo, espace ou durée passe par ici.
   ========================================================================== */

:root {
  /* encres et fonds */
  --ink: #080808;
  --ink-2: #1d1d1d;
  --ink-muted: rgba(8, 8, 8, .7);   /* texte secondaire, AA sur blanc */
  --ink-soft: rgba(8, 8, 8, .55);   /* légendes ≥ 13 px seulement */
  --ink-faint: rgba(8, 8, 8, .38);  /* décor, jamais du texte utile */
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f6f5f3;               /* fond de la zone page témoin */
  --grey: #f3f3f3;
  --grey-2: #e8e8e8;
  --line: rgba(8, 8, 8, .15);
  --line-2: rgba(8, 8, 8, .25);
  --line-strong: var(--ink);

  /* marque · rouge-orangé réservé aux actions et aux alertes */
  --accent: #f03b1d;                /* cadre, logo, décor (pas de petit texte : 3,9:1) */
  --action: #c8321a;                /* boutons, texte d'alerte (AA) */
  --action-dark: #9e2612;
  --action-tint: #fff7f5;
  --drop-tint: #fffaf8;

  /* statuts de fiche */
  --ok: #1f6b3f;
  --ok-bg: #e6f2ea;
  --warn: #8a4b0f;
  --warn-bg: #fbeedd;
  --warn-dot: #c26a1a;

  /* typo */
  --font-display: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, system-ui, sans-serif;
  --font-text: 'neue-haas-grotesk-text', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, system-ui, sans-serif;
  --font-thin: 'Inter Tight', var(--font-display);   /* le suffixe du logotype : artishoc.<i>plaquette</i> */

  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-h3: 18px;
  --fs-h2: 26px;
  --fs-h1: 38px;
  --fs-hero: 76px;
  --fs-count: 64px;

  --ls-tight: -.02em;
  --ls-tighter: -.035em;
  --ls-eyebrow: .1em;

  /* espaces · grille de 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 56px;
  --gutter: 32px;

  /* formes */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;
  --frame: 10px solid var(--accent);  /* plein écran uniquement */
  --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);

  /* mouvement · chaque animation dit quelque chose, 200 à 400 ms */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-pop: cubic-bezier(.2, .9, .3, 1.4);
  --dur-fast: 200ms;
  --dur: 300ms;
  --dur-slow: 400ms;
  --dur-propagation: 2600ms;          /* le climax, 2 à 3 s */

  /* gabarits */
  --topbar-h: 66px;
  --rail-w: 400px;                    /* présentoir d'étiquettes */
}

/* ==========================================================================
   une couleur par type d'information, la même partout
   (présentoir, étiquette sur la page, repère dans la fiche, surlignage)
   --f-bg : surface douce · --f-ink : texte et contour, AA sur --f-bg et sur blanc
   usage : <el data-field="titre">
   ========================================================================== */

[data-field="titre"]        { --f-bg: #fce7a6; --f-ink: #6b4e00; }
[data-field="artiste"]      { --f-bg: #f9d0da; --f-ink: #8a1f3d; }
[data-field="genre"]        { --f-bg: #e2d6f5; --f-ink: #4b2e83; }
[data-field="chapo"]        { --f-bg: #cfe6f7; --f-ink: #0d4f7a; }
[data-field="texte"]        { --f-bg: #dde3ea; --f-ink: #33475b; }
[data-field="distribution"] { --f-bg: #d5ebd6; --f-ink: #24603a; }
[data-field="dates"]        { --f-bg: #c7ede8; --f-ink: #0f5e57; }
[data-field="lieu"]         { --f-bg: #e6ebc4; --f-ink: #535a12; }
[data-field="duree"]        { --f-bg: #fbdcc2; --f-ink: #8a4310; }
[data-field="tarif"]        { --f-bg: #f3d9f0; --f-ink: #7a2a73; }
[data-field="age"]          { --f-bg: #d6dbf8; --f-ink: #2d3a8c; }
[data-field="mentions"]     { --f-bg: #ece5d8; --f-ink: #5c5040; }
[data-field="credit"]       { --f-bg: #ece5d8; --f-ink: #5c5040; }
[data-field="visuel"]       { --f-bg: #e4e4e4; --f-ink: #333333; }