/* ============================================================
   tirage.ch — design tokens (:root)
   Porté de design_reference/styles.css — PALETTE STRICTE (5 couleurs)
   F6F6F6 · E8E8E8 · 333333 · CC2526 · A01D1E
   Accent = valeur validée de la maquette (ref/ref-render.jsx), pas le #990100 du :root d'origine.
   ============================================================ */

:root {
  /* Fonds / papier */
  --paper:        #F6F6F6;
  --paper-soft:   #F6F6F6;
  --paper-deep:   #E8E8E8;
  --stone:        #E8E8E8;
  --stone-soft:   #E8E8E8;

  /* Encre */
  --ink:          #333333;
  --ink-soft:     #333333;
  --ink-muted:    #6E6E6E; /* #333 à ~60% sur fond clair */

  /* Rouge accent (valeur validée de la maquette) */
  --bordeaux:     #CC2526;
  --bordeaux-deep:#A01D1E;
  --red-bright:   #CC2526;
  --brass:        #A01D1E;

  /* Accent par défaut */
  --accent:       var(--bordeaux);
  --accent-deep:  var(--bordeaux-deep);

  /* Type — Ultra (titres) + Inter (corps) */
  --serif: 'Ultra', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Hairlines */
  --hairline: 1px solid rgba(51, 51, 51, 0.14);
  --hairline-strong: 1px solid rgba(51, 51, 51, 0.28);

  /* Espacements verticaux de section */
  --sec-none: 0px;
  --sec-s: 48px;
  --sec-m: 80px;
  --sec-l: 120px;
  --sec-xl: 140px;

  /* Largeur de contenu */
  --content-max: 1440px;
  --content-pad: 48px;
  --content-pad-mobile: 24px;
}

/* Mobile : sections resserrées. Les variables --sec- pilotent les classes
   sec-pt / sec-pb et les marges qui s'y réfèrent (ex. filet du home-promo). */
@media (max-width: 768px) {
  :root {
    --sec-s: 32px;
    --sec-m: 48px;
    --sec-l: 64px;
    --sec-xl: 80px;
  }
}