/* ==========================================================================
   Galri — Typography
   Display: Archivo SemiExpanded (geometric, wide, the wordmark face)
   Body:    Inter
   Tone: simple, light, modern — Apple-like restraint.
   ========================================================================== */
:root {
  /* Families */
  --font-display: "Archivo SemiExpanded", "Archivo", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights (Archivo) */
  --fw-extralight: 200; /* @kind other */
  --fw-light:      300; /* @kind other */
  --fw-regular:    400; /* @kind other */
  --fw-medium:     500; /* @kind other */
  --fw-semibold:   600; /* @kind other */
  --fw-bold:       700; /* @kind other */
  --fw-extrabold:  800; /* @kind other */
  --fw-black:      900; /* @kind other */

  /* Type scale — px values, fluid-friendly. 1.0 = 16px base. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* Line heights */
  --leading-none:    1; /* @kind other */
  --leading-tight:   1.12; /* @kind other */
  --leading-snug:    1.28; /* @kind other */
  --leading-normal:  1.5; /* @kind other */
  --leading-relaxed: 1.65; /* @kind other */

  /* Letter-spacing — Archivo wordmark uses very wide tracking (brand: 140/260).
     Expose brand tracking presets + UI defaults. */
  --tracking-tighter: -0.02em; /* @kind other */
  --tracking-tight:   -0.01em; /* @kind other */
  --tracking-normal:  0em; /* @kind other */
  --tracking-wide:    0.04em; /* @kind other */
  --tracking-wider:   0.12em; /* @kind other */
  --tracking-widest:  0.24em; /* @kind other */   /* ≈ wordmark réglages 140 / 260 */

  /* ---- Semantic roles ------------------------------------------------ */
  --font-heading: var(--font-display);
  --font-ui:      var(--font-display);   /* buttons, labels, nav */
  --font-text:    var(--font-body);

  /* ---- Rôles de titre (décision du 15/10/2026) ------------------------
     Trois titres de page selon le contexte, jamais d'autres tailles. */
  --title-app:    var(--text-2xl);   /* 30 px — H1 d'une page de l'application */
  --title-sheet:  var(--text-3xl);   /* 38 px — H1 d'une fiche (produit, exposition) */
  --title-site:   var(--text-4xl);   /* 48 px — H1 d'une page du site public */
  --title-section: var(--text-xl);   /* 24 px — titre de section */
  --title-panel:  var(--text-lg);    /* 20 px — titre de panneau, de carte vedette */
  /* Surtitre : 12 px, capitales, 0,12em, partout. */
  --eyebrow-size:     var(--text-xs);
  --eyebrow-tracking: var(--tracking-wider);
}

/* Optional ready-made heading classes (components may also set these inline). */
.galri-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.galri-title-app,
.galri-title-sheet,
.galri-title-site {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
}
.galri-title-app   { font-size: var(--title-app); }
.galri-title-sheet { font-size: var(--title-sheet); }
.galri-title-site  { font-size: var(--title-site); }

.galri-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.galri-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text);
}
.galri-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text);
}
.galri-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.galri-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
.galri-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}