/* BatchRoll — tokens de design. Source unique pour l'app et la vitrine.
   Voir DESIGN.md : « L'atelier d'imprimeur, pas le SaaS ».
   Une valeur codée en dur qui existe ici est un défaut, pas un raccourci. */

:root {
  /* ---- Couleur ------------------------------------------------------- */
  --br-paper:        #FAF9F6;   /* fond de toutes les surfaces            */
  --br-paper-sunk:   #F2F0EA;   /* fond en retrait                        */
  --br-ink:          #1A1915;   /* texte courant et titres     16,7:1     */
  --br-ink-soft:     #6B655A;   /* texte secondaire             5,5:1     */
  --br-accent:       #C1272D;   /* signal unique                5,6:1     */
  --br-accent-ink:   #8E1C21;   /* survol et appui                        */
  --br-rule:         #DAD5CA;   /* filets et bordures de champ            */
  --br-rule-strong:  #B9B2A3;   /* bordure d'un élément sélectionnable    */

  --br-accent-wash:  rgba(193, 39, 45, .08);
  --br-focus:        0 0 0 3px rgba(193, 39, 45, .22);

  /* ---- Typographie --------------------------------------------------- */
  --br-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --br-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --br-text-xs:      .75rem;    --br-leading-xs:   1.4;
  --br-text-sm:      .875rem;   --br-leading-sm:   1.5;
  --br-text-base:    1rem;      --br-leading-base: 1.6;
  --br-text-lg:      1.125rem;  --br-leading-lg:   1.5;
  --br-text-xl:      1.5rem;    --br-leading-xl:   1.25;
  --br-text-2xl:     2rem;      --br-leading-2xl:  1.15;
  --br-text-3xl:     2.75rem;   --br-leading-3xl:  1.05;

  --br-tracking-tight: -.02em;
  --br-measure:      68ch;

  /* ---- Espacement ---------------------------------------------------- */
  --br-space-1: 4px;   --br-space-2: 8px;   --br-space-3: 12px;
  --br-space-4: 16px;  --br-space-5: 24px;  --br-space-6: 32px;
  --br-space-7: 48px;  --br-space-8: 64px;  --br-space-9: 96px;

  --br-width:  72rem;
  --br-gutter: var(--br-space-5);

  /* ---- Formes -------------------------------------------------------- */
  --br-radius: 3px;
  --br-shadow: 0 1px 2px rgba(26, 25, 21, .06),
               0 8px 24px rgba(26, 25, 21, .05);

  /* ---- Mouvement ----------------------------------------------------- */
  --br-ease: cubic-bezier(.16, 1, .3, 1);
  --br-dur:  180ms;
}

/* ---- Surfaces du navigateur -----------------------------------------
   Elles portent la direction autant que le reste, et personne ne les
   dessine par défaut. */

::selection          { background: rgba(193, 39, 45, .16); color: var(--br-ink); }
:root                { accent-color: var(--br-accent); caret-color: var(--br-accent); }
:root                { scrollbar-color: var(--br-rule-strong) var(--br-paper); }

::-webkit-scrollbar          { width: 11px; height: 11px; }
::-webkit-scrollbar-track    { background: var(--br-paper); }
::-webkit-scrollbar-thumb    { background: var(--br-rule-strong); border: 3px solid var(--br-paper); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--br-ink-soft); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1px solid var(--br-accent);
  outline-offset: 1px;
  box-shadow: var(--br-focus);
}

@media (prefers-reduced-motion: reduce) {
  /* On retire les déplacements, on garde les changements d'état. */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: 1ms !important;
  }
}