/* ============================================================
   SWISS CLUSTER CAPTIONS — component styles
   Framework-free. Two caption types.

   Base class:  .sc-heading
   Modifiers:   .sc-heading--display     accent colour
                .sc-heading--sub   muted grey

   Usage:  <h2 class="sc-heading sc-heading--display">ALD/PVD Cluster.</h2>

   Both: Inter, 48px, weight 900.
   Theming: override the CSS variables in :root or on the element.
   ============================================================ */

.sc-heading {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-heading-accent: var(--sc-accent); /* primary colour   */
  --sc-heading-secondary: var(--sc-gray-3); /* secondary colour */
  --sc-heading-size: clamp(32px, 3.4vw, 48px);
  --sc-heading-weight: var(--sc-weight-black);
  --sc-heading-font: var(--sc-font-sans);

  /* ---- shared type ---- */
  margin: 0;
  font-family: var(--sc-heading-font);
  font-size: var(--sc-heading-size);
  font-weight: var(--sc-heading-weight);
  line-height: 1.25;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

/* ---- TYPE 1: PRIMARY — accent colour ---- */
.sc-heading--display {
  color: var(--sc-heading-accent);
}

/* ---- TYPE 2: SECONDARY — muted grey ---- */
.sc-heading--sub {
  color: var(--sc-heading-secondary);
}