/* KAFEDRA Typography v1.1.0 — mobile Display H1; draft for review. */

:root {
  --kf-font-family-sans: 'Inter', Arial, sans-serif;

  --kf-color-display: #1E1E1E;
  --kf-color-feature-text: #010101;
  --kf-color-lead: #000000;
  --kf-color-body-primary: #000000;
  --kf-color-body-secondary: #898989; /* preliminary */
  --kf-color-eyebrow: #000000;
  --kf-color-caption: #898989;

  --kf-type-display-size: 60px;
  --kf-type-display-weight: 500;
  --kf-type-display-line-height: 100%;
  --kf-type-display-letter-spacing: -2.4px;

  --kf-type-feature-size: 32px;
  --kf-type-feature-weight: 500;
  --kf-type-feature-line-height: 100%;
  --kf-type-feature-letter-spacing: -0.96px;

  --kf-type-lead-size: 26px;
  --kf-type-lead-weight: 500;
  --kf-type-lead-line-height: 102%;
  --kf-type-lead-letter-spacing: -0.78px;

  --kf-type-body-size: 15px;
  --kf-type-body-weight: 500;
  --kf-type-body-line-height: 120%;
  --kf-type-body-letter-spacing: -0.3px;

  --kf-type-eyebrow-size: 16px;
  --kf-type-eyebrow-weight: 500;
  --kf-type-eyebrow-line-height: 110%;
  --kf-type-eyebrow-letter-spacing: 0.32px;

  --kf-type-caption-size: 12px;
  --kf-type-caption-weight: 500;
  --kf-type-caption-line-height: 110%;
  --kf-type-caption-letter-spacing: 0.72px;
}

.kf-heading-display {
  margin: 0;
  color: var(--kf-color-display);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-display-size);
  font-style: normal;
  font-weight: var(--kf-type-display-weight);
  line-height: var(--kf-type-display-line-height);
  letter-spacing: var(--kf-type-display-letter-spacing);
}

/* Mobile Display H1; desktop tokens remain unchanged. */
@media (max-width: 639.98px) {
  .kf-heading-display {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.05;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.kf-heading-feature {
  margin: 0;
  color: var(--kf-color-feature-text);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-feature-size);
  font-style: normal;
  font-weight: var(--kf-type-feature-weight);
  line-height: var(--kf-type-feature-line-height);
  letter-spacing: var(--kf-type-feature-letter-spacing);
}

/* Guarded Figma cap/leading trim enhancement; unsupported browsers keep fallback above. */
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .kf-heading-feature {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.kf-lead {
  margin: 0;
  color: var(--kf-color-lead);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-lead-size);
  font-style: normal;
  font-weight: var(--kf-type-lead-weight);
  line-height: var(--kf-type-lead-line-height);
  letter-spacing: var(--kf-type-lead-letter-spacing);
}

.kf-body {
  margin: 0;
  color: var(--kf-color-body-primary);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-body-size);
  font-style: normal;
  font-weight: var(--kf-type-body-weight);
  line-height: var(--kf-type-body-line-height);
  letter-spacing: var(--kf-type-body-letter-spacing);
}

/* Secondary color stays preliminary and centrally editable. */
.kf-body--secondary {
  color: var(--kf-color-body-secondary);
}

.kf-eyebrow {
  margin: 0;
  color: var(--kf-color-eyebrow);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-eyebrow-size);
  font-style: normal;
  font-weight: var(--kf-type-eyebrow-weight);
  line-height: var(--kf-type-eyebrow-line-height);
  letter-spacing: var(--kf-type-eyebrow-letter-spacing);
}

.kf-caption {
  margin: 0;
  color: var(--kf-color-caption);
  font-family: var(--kf-font-family-sans);
  font-size: var(--kf-type-caption-size);
  font-style: normal;
  font-weight: var(--kf-type-caption-weight);
  line-height: var(--kf-type-caption-line-height);
  letter-spacing: var(--kf-type-caption-letter-spacing);
}