/* ===========================================================================
   SpitiDaneio — Typography tokens
   ---------------------------------------------------------------------------
   One typeface does everything: CF Asty Std (exposed here as "Asty").
   Headings: Bold, tight tracking. Body: Regular, neutral tracking.
   The deck specifies negative tracking on display sizes ("Title -2%,
   Subheading -1%, Body 0%") which we encode below.
   =========================================================================== */

:root {
  /* Families */
  --font-sans: "Asty", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* Weights */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Fluid display scale (clamped for responsive headings) */
  --text-display-2xl: 72px;
  --text-display-xl:  56px;
  --text-display-lg:  44px;
  --text-display-md:  36px;

  /* Fixed UI / type scale */
  --text-3xl: 30px;
  --text-2xl: 24px;
  --text-xl:  20px;
  --text-lg:  18px;
  --text-md:  16px;  /* base body */
  --text-sm:  14px;
  --text-xs:  13px;
  --text-2xs: 11px;  /* eyebrows / overlines */

  /* Line heights */
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* Letter spacing (brand: tight on display, open on overlines) */
  --tracking-display: -0.02em;  /* -2% on titles                */
  --tracking-heading: -0.01em;  /* -1% on subheadings           */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;   /* uppercase ΕΥΕΒΡΟW labels      */
}

/* ---- Optional utility classes (semantic type roles) ---- */
.sd-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.sd-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.sd-subheading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
}
.sd-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-body);
}
.sd-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}