/* ============================================================
   QUBE · Typography tokens
   Primary: Articulat CF — track TIGHT (negative), tighter as
   titles grow. Sizes follow the golden ratio (×/÷ 1.618).
   Secondary: Alga italic — connector words on a separate line.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: "Articulat CF", "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Alga", "Times New Roman", Times, serif; /* italic only */

  /* ---- Weights ---- */
  --fw-thin: 100;       /* @kind font */
  --fw-extralight: 200; /* @kind font */
  --fw-light: 300;      /* @kind font */
  --fw-normal: 400;     /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-demibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */
  --fw-heavy: 900;      /* @kind font */

  /* ---- Golden-ratio type scale (φ = 1.618), base 1rem = 16px ---- */
  --text-2xs: 0.625rem;   /* 10px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:  1.25rem;    /* 20px */
  --text-lg:  1.618rem;   /* ~26px  · base ×φ */
  --text-xl:  2.618rem;   /* ~42px  · ×φ² */
  --text-2xl: 4.236rem;   /* ~68px  · ×φ³ */
  --text-3xl: 6.854rem;   /* ~110px · ×φ⁴ (headline) */
  --text-4xl: 11.09rem;   /* ~177px · ×φ⁵ (heavy title) */

  /* ---- Line-height (leading) ---- */
  --leading-title: 0.92;   /* @kind font */
  --leading-head:  0.9;    /* @kind font */
  --leading-snug:  1.1;    /* @kind font */
  --leading-body:  1.5;    /* @kind font */
  --leading-tight: 1.0;    /* @kind font */

  /* ---- Tracking (letter-spacing) — negative, tighter when bigger ---- */
  --track-title: -0.035em;  /* @kind font */
  --track-head:  -0.03em;   /* @kind font */
  --track-sub:   -0.02em;   /* @kind font */
  --track-body:  -0.005em;  /* @kind font */
  --track-label:  0.14em;   /* @kind font */
  --track-normal: 0;        /* @kind font */
}

/* ============================================================
   Type role helper classes (optional — tokens preferred)
   ============================================================ */
.q-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-demibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
  text-wrap: balance;
}
.q-headline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}
.q-sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-sub);
  text-wrap: pretty;
}
.q-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  text-wrap: pretty;
}
.q-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
/* Italic connector accent — for "a", "of", "at", "the", "&" inside titles */
.q-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-normal);
  letter-spacing: -0.01em;
}