/* ===========================================================
   TechHome — Typographie
   Cabinet Grotesk : identité, titres, chiffres. Toujours serré.
   Satoshi : texte courant, labels, UI. Jamais au-dessus de 24px.
   =========================================================== */
:root{
  --font-display:"Cabinet Grotesk","Satoshi",system-ui,sans-serif;
  --font-body:"Satoshi","Cabinet Grotesk",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fw-extralight:200;/* @kind font */--fw-light:300;/* @kind font */--fw-regular:400;/* @kind font */--fw-medium:500; /* @kind font */
  --fw-bold:700;/* @kind font */--fw-extrabold:800;/* @kind font */--fw-black:900; /* @kind font */

  /* Échelle — ratio 1.25, ancrée sur 16px */
  --fs-3xs:11px; --fs-2xs:12px; --fs-xs:13px; --fs-sm:15px;
  --fs-base:17px; --fs-md:19px; --fs-lg:23px; --fs-xl:28px;
  --fs-2xl:35px; --fs-3xl:44px; --fs-4xl:56px; --fs-5xl:72px;
  --fs-6xl:92px; --fs-7xl:120px;

  --lh-tight:0.95;  /* @kind font */
  --lh-snug:1.12;  /* @kind font */
  --lh-normal:1.45;  /* @kind font */
  --lh-loose:1.65;  /* @kind font */

  /* Interlettrage : Cabinet Grotesk se resserre en grand,
     s'ouvre en petites capitales. */
  --ls-display:-0.03em;  /* @kind font */
  --ls-heading:-0.02em;  /* @kind font */
  --ls-body:0em;  /* @kind font */
  --ls-label:0.02em;  /* @kind font */
  --ls-eyebrow:0.16em;  /* @kind font */

  --measure-narrow:34ch;  /* @kind spacing */
  --measure:62ch;  /* @kind spacing */
  --measure-wide:78ch;  /* @kind spacing */
}

/* Rôles typographiques — utilisables directement en classes */
.th-display{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-5xl);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.th-h1{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3xl);line-height:var(--lh-snug);letter-spacing:var(--ls-heading)}
.th-h2{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2xl);line-height:var(--lh-snug);letter-spacing:var(--ls-heading)}
.th-h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-heading)}
.th-eyebrow{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-2xs);line-height:1.2;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.th-lead{font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--text-secondary)}
.th-body{font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal)}
.th-small{font-family:var(--font-body);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.th-caption{font-family:var(--font-body);font-size:var(--fs-2xs);line-height:1.35;color:var(--text-tertiary)}
.th-label{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-xs);letter-spacing:var(--ls-label)}
.th-numeric{font-family:var(--font-display);font-weight:var(--fw-extrabold);font-variant-numeric:tabular-nums;letter-spacing:-0.04em}

/* --- Web : rôles du site vitrine (thème WordPress) ------------------ */
:root{
  --fs-4xs:9px;
  --fs-hero:var(--fs-5xl);
  --fs-hero-mobile:clamp(38px,11vw,52px);  /* @kind font */
  --lh-hero:0.98;  /* @kind font */
  --lh-quote:1.35;  /* @kind font */
  --lh-check:1.4;  /* @kind font */
  --ls-hero:-0.035em;  /* @kind font */
  --ls-numeric:-0.04em;  /* @kind font */
  --ls-tag:0.12em;  /* @kind font */
  --ls-tagline:0.14em;  /* @kind font */
  --measure-hero:16ch;  /* @kind spacing */
  --measure-stat:20ch;  /* @kind spacing */
  --measure-heading:22ch;  /* @kind spacing */
  --measure-footer:30ch;  /* @kind spacing */
  --measure-cta:34ch;  /* @kind spacing */
  --measure-quote:40ch;  /* @kind spacing */
  --measure-lead:48ch;  /* @kind spacing */
  --measure-section-lead:56ch;  /* @kind spacing */
}