/**
 * gökberk design system — typography utility classes.
 *
 * Light-DOM text styling for page/app content. Each class maps a type role to its
 * `--gok-type-<role>-*` tokens, so the responsive Mobile→Desktop switch (defined in
 * tokens.css) happens automatically. Components style their own text from the same role
 * tokens inside their Shadow DOM; these classes are for markup content.
 *
 * Requires tokens.css to be loaded (and fonts.css for the real typefaces).
 */

.gok-expressive,
.gok-headline-1,
.gok-headline-2,
.gok-headline-3,
.gok-headline-4,
.gok-headline-5,
.gok-headline-6,
.gok-eyebrow,
.gok-body-intro,
.gok-body-large,
.gok-body-regular,
.gok-body-small,
.gok-caption,
.gok-footnote,
.gok-code {
  margin: 0;
}

.gok-expressive {
  font-family: var(--gok-type-expressive-family);
  font-weight: var(--gok-type-expressive-weight);
  font-size: var(--gok-type-expressive-size);
  line-height: var(--gok-type-expressive-line);
  letter-spacing: var(--gok-type-expressive-tracking);
}

.gok-headline-1 {
  font-family: var(--gok-type-headline-1-family);
  font-weight: var(--gok-type-headline-1-weight);
  font-size: var(--gok-type-headline-1-size);
  line-height: var(--gok-type-headline-1-line);
  letter-spacing: var(--gok-type-headline-1-tracking);
}

.gok-headline-2 {
  font-family: var(--gok-type-headline-2-family);
  font-weight: var(--gok-type-headline-2-weight);
  font-size: var(--gok-type-headline-2-size);
  line-height: var(--gok-type-headline-2-line);
  letter-spacing: var(--gok-type-headline-2-tracking);
}

.gok-headline-3 {
  font-family: var(--gok-type-headline-3-family);
  font-weight: var(--gok-type-headline-3-weight);
  font-size: var(--gok-type-headline-3-size);
  line-height: var(--gok-type-headline-3-line);
  letter-spacing: var(--gok-type-headline-3-tracking);
}

.gok-headline-4 {
  font-family: var(--gok-type-headline-4-family);
  font-weight: var(--gok-type-headline-4-weight);
  font-size: var(--gok-type-headline-4-size);
  line-height: var(--gok-type-headline-4-line);
  letter-spacing: var(--gok-type-headline-4-tracking);
}

.gok-headline-5 {
  font-family: var(--gok-type-headline-5-family);
  font-weight: var(--gok-type-headline-5-weight);
  font-size: var(--gok-type-headline-5-size);
  line-height: var(--gok-type-headline-5-line);
  letter-spacing: var(--gok-type-headline-5-tracking);
}

.gok-headline-6 {
  font-family: var(--gok-type-headline-6-family);
  font-weight: var(--gok-type-headline-6-weight);
  font-size: var(--gok-type-headline-6-size);
  line-height: var(--gok-type-headline-6-line);
  letter-spacing: var(--gok-type-headline-6-tracking);
}

/* Eyebrow / overline — the studio's small mono label. Uppercase + wide tracking. */
.gok-eyebrow {
  font-family: var(--gok-type-eyebrow-family);
  font-weight: var(--gok-type-eyebrow-weight);
  font-size: var(--gok-type-eyebrow-size);
  line-height: var(--gok-type-eyebrow-line);
  letter-spacing: var(--gok-type-eyebrow-tracking);
  text-transform: uppercase;
}

.gok-body-intro {
  font-family: var(--gok-type-body-intro-family);
  font-weight: var(--gok-type-body-intro-weight);
  font-size: var(--gok-type-body-intro-size);
  line-height: var(--gok-type-body-intro-line);
}

.gok-body-large {
  font-family: var(--gok-type-body-large-family);
  font-weight: var(--gok-type-body-large-weight);
  font-size: var(--gok-type-body-large-size);
  line-height: var(--gok-type-body-large-line);
}

.gok-body-regular {
  font-family: var(--gok-type-body-regular-family);
  font-weight: var(--gok-type-body-regular-weight);
  font-size: var(--gok-type-body-regular-size);
  line-height: var(--gok-type-body-regular-line);
}

.gok-body-small {
  font-family: var(--gok-type-body-small-family);
  font-weight: var(--gok-type-body-small-weight);
  font-size: var(--gok-type-body-small-size);
  line-height: var(--gok-type-body-small-line);
}

.gok-caption {
  font-family: var(--gok-type-caption-family);
  font-weight: var(--gok-type-caption-weight);
  font-size: var(--gok-type-caption-size);
  line-height: var(--gok-type-caption-line);
}

.gok-footnote {
  font-family: var(--gok-type-footnote-family);
  font-weight: var(--gok-type-footnote-weight);
  font-size: var(--gok-type-footnote-size);
  line-height: var(--gok-type-footnote-line);
}

.gok-code {
  font-family: var(--gok-type-code-family);
  font-weight: var(--gok-type-code-weight);
  font-size: var(--gok-type-code-size);
  line-height: var(--gok-type-code-line);
}