/* Atelier Restored — Typography tokens.
   Editorial signature = heavy display (700) vs very light body (300). Never blur it.
   UPPERCASE display is the default voice for h1/h2. Body stays sentence-case.
   All-caps labels & buttons carry 1.5px tracking ("machined", not "typed"). */
:root {
  --font-display: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --weight-light: 300;   /* engineered body */
  --weight-regular: 400; /* sub-titles, nav */
  --weight-display: 700; /* stamped display */

  /* ---- Type scale (token : size / weight / line-height / tracking) ---- */
  --fs-display-xl: 80px;  /* hero h1 */
  --fs-display-lg: 56px;  /* section heads */
  --fs-display-md: 40px;  /* sub-section heads, model names */
  --fs-display-sm: 32px;  /* CTA-band heads, spec values */
  --fs-title-lg: 24px;    /* card titles */
  --fs-title-md: 20px;    /* sub-titles, lead paragraphs */
  --fs-title-sm: 18px;    /* spec callouts, intro paragraphs */
  --fs-label: 14px;       /* category tabs, inline labels */
  --fs-body-md: 16px;     /* default body */
  --fs-body-sm: 14px;     /* footer body, fine print */
  --fs-caption: 12px;     /* photo captions, credits */
  --fs-button: 14px;      /* button labels */
  --fs-nav: 14px;         /* top-nav menu items */

  --tracking-label: 1.5px;   /* uppercase labels + buttons */
  --tracking-nav: 0.5px;
  --tracking-caption: 0.5px;
  --tracking-display: -0.5px; /* tighten large display (Saira runs slightly wide) */
}

/* Convenience specimen classes — used by cards & UI kits. */
.ds-display-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: 1.0;  letter-spacing: var(--tracking-display); text-transform: uppercase; }
.ds-display-lg { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-lg); line-height: 1.05; letter-spacing: var(--tracking-display); text-transform: uppercase; }
.ds-display-md { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-md); line-height: 1.1;  letter-spacing: var(--tracking-display); text-transform: uppercase; }
.ds-display-sm { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-sm); line-height: 1.15; letter-spacing: 0; text-transform: uppercase; }
.ds-title-lg   { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-title-lg); line-height: 1.3; }
.ds-title-md   { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-title-md); line-height: 1.4; }
.ds-title-sm   { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-title-sm); line-height: 1.4; }
.ds-label      { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 1.3; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ds-body-md    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-md); line-height: 1.5; }
.ds-body-sm    { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-body-sm); line-height: 1.5; }
.ds-caption    { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); line-height: 1.4; letter-spacing: var(--tracking-caption); }
.ds-nav        { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-nav); line-height: 1.4; letter-spacing: var(--tracking-nav); }