/* ============================================================
   Cyberfy — Typography tokens
   figmaSans-style fine-weight variable sans + mono taxonomy.
   Weight, not size, carries body hierarchy.
   Negative letter-spacing scales with display size.
   ============================================================ */

:root {
  /* Family roles are defined in fonts.css (--font-sans, --font-mono) */

  /* --- Fine-grained weight axis (single voice that flexes) --- */
  --weight-320: 320;
  --weight-330: 330;
  --weight-340: 340;
  --weight-400: 400;
  --weight-450: 450;
  --weight-480: 480;
  --weight-540: 540;
  --weight-700: 700;

  /* --- display-xl : hero headlines --- */
  --type-display-xl-size: 86px;
  --type-display-xl-weight: 340;
  --type-display-xl-leading: 1.0;
  --type-display-xl-tracking: -1.72px;

  /* --- display-lg : section opener headlines --- */
  --type-display-lg-size: 64px;
  --type-display-lg-weight: 340;
  --type-display-lg-leading: 1.1;
  --type-display-lg-tracking: -0.96px;

  /* --- headline : story-block titles (inside color blocks) --- */
  --type-headline-size: 26px;
  --type-headline-weight: 540;
  --type-headline-leading: 1.35;
  --type-headline-tracking: -0.26px;

  /* --- subhead : near-headline intro paragraphs --- */
  --type-subhead-size: 26px;
  --type-subhead-weight: 340;
  --type-subhead-leading: 1.35;
  --type-subhead-tracking: -0.26px;

  /* --- card-title : pricing tiers, feature cards --- */
  --type-card-title-size: 24px;
  --type-card-title-weight: 700;
  --type-card-title-leading: 1.45;
  --type-card-title-tracking: 0;

  /* --- body-lg : lead body, contact labels --- */
  --type-body-lg-size: 20px;
  --type-body-lg-weight: 330;
  --type-body-lg-leading: 1.4;
  --type-body-lg-tracking: -0.14px;

  /* --- body : default --- */
  --type-body-size: 18px;
  --type-body-weight: 320;
  --type-body-leading: 1.45;
  --type-body-tracking: -0.26px;

  /* --- body-sm : card body, footer links --- */
  --type-body-sm-size: 16px;
  --type-body-sm-weight: 330;
  --type-body-sm-leading: 1.45;
  --type-body-sm-tracking: -0.14px;

  /* --- link / button : inline emphasis + all pills --- */
  --type-link-size: 20px;
  --type-link-weight: 480;
  --type-link-leading: 1.4;
  --type-link-tracking: -0.1px;

  /* --- eyebrow : figmaMono uppercase section markers --- */
  --type-eyebrow-size: 18px;
  --type-eyebrow-weight: 400;
  --type-eyebrow-leading: 1.3;
  --type-eyebrow-tracking: 0.54px;

  /* --- caption : mono uppercase captions, footer heads --- */
  --type-caption-size: 12px;
  --type-caption-weight: 400;
  --type-caption-leading: 1.0;
  --type-caption-tracking: 0.6px;
}

/* ------------------------------------------------------------
   Optional helper classes (consumers may use vars directly)
   ------------------------------------------------------------ */
.cf-display-xl {
  font-family: var(--font-sans);
  font-size: var(--type-display-xl-size);
  font-weight: var(--type-display-xl-weight);
  line-height: var(--type-display-xl-leading);
  letter-spacing: var(--type-display-xl-tracking);
}
.cf-display-lg {
  font-family: var(--font-sans);
  font-size: var(--type-display-lg-size);
  font-weight: var(--type-display-lg-weight);
  line-height: var(--type-display-lg-leading);
  letter-spacing: var(--type-display-lg-tracking);
}
.cf-headline {
  font-family: var(--font-sans);
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  line-height: var(--type-headline-leading);
  letter-spacing: var(--type-headline-tracking);
}
.cf-subhead {
  font-family: var(--font-sans);
  font-size: var(--type-subhead-size);
  font-weight: var(--type-subhead-weight);
  line-height: var(--type-subhead-leading);
  letter-spacing: var(--type-subhead-tracking);
}
.cf-card-title {
  font-family: var(--font-sans);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-leading);
}
.cf-body-lg {
  font-family: var(--font-sans);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  letter-spacing: var(--type-body-lg-tracking);
}
.cf-body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
}
.cf-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);
}
.cf-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.cf-caption {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
}