/* Implements reference/design-system.md §4. Visuals: reference/fic-design-system.html. */
/* Roles describe content hierarchy; colour, spacing and layout stay with components. */
:root {
  --fic-font-heading: "Manrope", sans-serif;
  --fic-font-body: "Nunito Sans", sans-serif;
  --fic-weight-regular: 400;
  --fic-weight-bold: 700;
  --fic-weight-heavy: 800;
  --fic-type-tracking: 0;
  --fic-type-button-secondary-weight: var(--fic-weight-bold);

  /* Emphasised practical facts and contact values are distinct from supporting prose. */
  --fic-type-fact-size: 14px;
  --fic-type-fact-weight: var(--fic-weight-heavy);
  --fic-type-fact-leading: 1.45;
  --fic-type-value-size: 15px;
  --fic-type-value-weight: var(--fic-weight-bold);
  --fic-type-value-leading: 1.55;

  /* Existing H1 role names remain compatible aliases of the v2 hierarchy. */
  --fic-type-display-size: var(--fic-type-hero-size);
  --fic-type-display-weight: var(--fic-weight-heavy);
  --fic-type-display-leading: 1.1;
  --fic-type-display-tracking: -0.02em;

  --fic-type-hero-size: 56px;
  --fic-type-hero-weight: var(--fic-weight-heavy);
  --fic-type-hero-leading: 1.1;
  --fic-type-hero-tracking: -0.02em;

  --fic-type-title-size: var(--fic-type-hero-size);
  --fic-type-title-weight: var(--fic-weight-heavy);
  --fic-type-title-leading: var(--fic-type-hero-leading);
  --fic-type-title-tracking: var(--fic-type-hero-tracking);

  --fic-type-section-size: 40px;
  --fic-type-section-weight: var(--fic-weight-heavy);
  --fic-type-section-leading: 1.15;
  --fic-type-section-tracking: -0.015em;

  --fic-type-subheading-size: 24px;
  --fic-type-subheading-weight: var(--fic-weight-bold);
  --fic-type-subheading-leading: 1.25;
  --fic-type-subheading-tracking: -0.01em;

  --fic-type-heading-small-size: 18px;
  --fic-type-heading-small-weight: var(--fic-weight-bold);
  --fic-type-heading-small-leading: 1.3;

  /* Meaningful standard-card copy; metadata keeps its small/meta roles. */
  --fic-type-card-description-size: 14px;
  --fic-type-card-description-weight: var(--fic-weight-regular);
  --fic-type-card-description-leading: 1.6;

  --fic-type-panel-size: 28px;
  --fic-type-panel-weight: var(--fic-weight-heavy);
  --fic-type-panel-leading: 1.2;

  --fic-type-lead-size: 19px;
  --fic-type-lead-weight: var(--fic-weight-regular);
  --fic-type-lead-leading: 1.6;

  --fic-type-reading-size: 17px;
  --fic-type-reading-weight: var(--fic-weight-regular);
  --fic-type-reading-leading: 1.8;

  --fic-type-body-size: 16px;
  --fic-type-body-weight: var(--fic-weight-regular);
  --fic-type-body-leading: 1.65;

  --fic-type-support-size: 14px;
  --fic-type-support-weight: var(--fic-weight-regular);
  --fic-type-support-leading: 1.65;

  --fic-type-small-size: 14px;
  --fic-type-small-weight: var(--fic-weight-regular);
  --fic-type-small-leading: 1.5;

  --fic-type-button-size: 13px;
  --fic-type-button-weight: var(--fic-weight-heavy);
  --fic-type-button-leading: 1;

  --fic-type-label-size: 11px;
  --fic-type-label-weight: var(--fic-weight-heavy);
  --fic-type-label-leading: 1;

  --fic-type-meta-size: 10px;
  --fic-type-meta-weight: var(--fic-weight-heavy);
  --fic-type-meta-leading: 1.3;

  --fic-type-form-label-size: 12px;
  --fic-type-form-label-weight: var(--fic-weight-heavy);
  --fic-type-form-label-leading: 1.5;

  --fic-type-form-control-size: 16px;
  --fic-type-form-control-weight: var(--fic-weight-regular);
  --fic-type-form-control-leading: 1.7;

  --fic-type-summary-size: 16px;
  --fic-type-summary-weight: var(--fic-weight-heavy);
  --fic-type-summary-leading: 1.5;

  --fic-type-prose-subheading-size: 21px;
  --fic-type-prose-subheading-weight: var(--fic-weight-heavy);
  --fic-type-prose-subheading-leading: 1.35;

  --fic-type-feature-size: 46px;
  --fic-type-feature-weight: var(--fic-weight-heavy);
  --fic-type-feature-leading: 1.08;
}

/* Include 768px in the public mobile breakpoint. */
@media (max-width: 768px) {
  :root {
    --fic-type-hero-size: 40px;
    --fic-type-section-size: 30px;
    --fic-type-subheading-size: 20px;
    --fic-type-heading-small-size: 17px;
    --fic-type-panel-size: 24px;
    --fic-type-lead-size: 17px;
    --fic-type-reading-size: 16px;
    --fic-type-prose-subheading-size: 18px;
    --fic-type-feature-size: 32px;
  }
}

/* V2 defines H1–H4 explicitly. Lower content headings reuse the existing
 * body/small sizes with bold heading metrics, avoiding tiny browser defaults. */
h5,
h6 {
  font-family: var(--fic-font-heading);
  font-weight: var(--fic-weight-bold);
  line-height: var(--fic-type-heading-small-leading);
  letter-spacing: var(--fic-type-tracking);
}
h5 { font-size: var(--fic-type-body-size); }
h6 { font-size: var(--fic-type-small-size); }

/* Utilities used by the design reference; components consume the tokens directly. */
.fic-type-display {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-display-size);
  font-weight: var(--fic-type-display-weight);
  line-height: var(--fic-type-display-leading);
  letter-spacing: var(--fic-type-display-tracking);
}

.fic-type-hero {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-hero-size);
  font-weight: var(--fic-type-hero-weight);
  line-height: var(--fic-type-hero-leading);
  letter-spacing: var(--fic-type-hero-tracking);
}

.fic-type-title {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-title-size);
  font-weight: var(--fic-type-title-weight);
  line-height: var(--fic-type-title-leading);
  letter-spacing: var(--fic-type-title-tracking);
}

.fic-type-section {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-section-size);
  font-weight: var(--fic-type-section-weight);
  line-height: var(--fic-type-section-leading);
  letter-spacing: var(--fic-type-section-tracking);
}

.fic-type-subheading {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-subheading-size);
  font-weight: var(--fic-type-subheading-weight);
  line-height: var(--fic-type-subheading-leading);
  letter-spacing: var(--fic-type-subheading-tracking);
}

.fic-type-heading-small {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-heading-small-size);
  font-weight: var(--fic-type-heading-small-weight);
  line-height: var(--fic-type-heading-small-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-type-lead {
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-lead-size);
  font-weight: var(--fic-type-lead-weight);
  line-height: var(--fic-type-lead-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-type-body {
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-body-size);
  font-weight: var(--fic-type-body-weight);
  line-height: var(--fic-type-body-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-type-small {
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-small-size);
  font-weight: var(--fic-type-small-weight);
  line-height: var(--fic-type-small-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-type-label {
  font-family: var(--fic-font-heading);
  font-size: var(--fic-type-label-size);
  font-weight: var(--fic-type-label-weight);
  line-height: var(--fic-type-label-leading);
  letter-spacing: var(--fic-type-tracking);
}

.fic-type-card-description {
  font-family: var(--fic-font-body);
  font-size: var(--fic-type-card-description-size);
  font-weight: var(--fic-type-card-description-weight);
  line-height: var(--fic-type-card-description-leading);
  letter-spacing: var(--fic-type-tracking);
}