/*
 * atoms.css — default-styling per atom-rol (atomic-flow B2.1, 29 apr 2026).
 *
 * Atoms representeren een ROL in de inhoud (claim, eyebrow, lead, etc.)
 * en krijgen hier een token-bound default-styling. Block-CSS overrules
 * via inline-style binnen blok-templates (hogere cascade-positie =
 * higher specificity in document-order).
 *
 * Toekomst (B2.2): designer kan atom-styling site-wide overrulen via
 * Composer Atomen-tab → genereert per-atom CSS-vars (--atom-claim-*) die
 * deze defaults overschrijven.
 *
 * Cascade-volgorde:
 *   tokens.css       → CSS-vars (design-system.yaml)
 *   base.css         → reset + body-defaults
 *   atoms.css        → defaults per atom-rol (deze file)
 *   pf-block.css     → designer-toolkit utilities (per-blok overrides)
 *   inline <style>   → per-blok-template (hoogste specificity binnen block-context)
 */

/* ============================================================
   Baseline — alle atomen erven deze defaults
   ============================================================ */
.atom {
  /* Reset margins zodat atom in elke context schoon start. */
  margin: 0;
}

/* ============================================================
   Tekst-atomen
   ============================================================ */

/* B2.2 (29 apr 2026): atom-styles consumen --atom-<slug>-* CSS-vars
   die door tokens-to-css.ts worden gegenereerd uit design-system.yaml
   `atoms`-key. Zonder override: var-fallback = role-default uit design-
   system. Met override: designer-keuze wint site-wide. */

/* Claim — h1, hoofdbelofte van een blok. */
.atom--claim {
  font-family: var(--text-display-xl-family);
  font-size: calc(var(--text-display-xl-size) * var(--atom-claim-size-multiplier, 1));
  line-height: var(--text-display-xl-line-height);
  font-weight: var(--atom-claim-weight, var(--text-display-xl-weight));
  letter-spacing: var(--text-display-xl-letter-spacing);
  color: var(--atom-claim-color, var(--color-text-default));
  text-transform: var(--atom-claim-transform, none);
}

/* Section-heading — h2, sectie-binnen-pagina. */
.atom--section-heading {
  font-family: var(--text-display-lg-family);
  font-size: calc(var(--text-display-lg-size) * var(--atom-section-heading-size-multiplier, 1));
  line-height: var(--text-display-lg-line-height);
  font-weight: var(--atom-section-heading-weight, var(--text-display-lg-weight));
  letter-spacing: var(--text-display-lg-letter-spacing);
  color: var(--atom-section-heading-color, var(--color-text-default));
  text-transform: var(--atom-section-heading-transform, none);
}

/* Eyebrow — mini-label boven claim/section-heading. */
.atom--eyebrow {
  font-family: var(--text-ui-label-family);
  font-size: calc(var(--text-ui-label-size) * var(--atom-eyebrow-size-multiplier, 1));
  font-weight: var(--atom-eyebrow-weight, var(--text-ui-label-weight));
  letter-spacing: var(--text-ui-label-letter-spacing);
  text-transform: var(--atom-eyebrow-transform, var(--text-ui-label-text-transform));
  color: var(--atom-eyebrow-color, var(--color-accent-primary));
}

/* Lead — ondersteunende paragraph. */
.atom--lead {
  font-family: var(--text-body-large-family);
  font-size: calc(var(--text-body-large-size) * var(--atom-lead-size-multiplier, 1));
  line-height: var(--text-body-large-line-height);
  font-weight: var(--atom-lead-weight, var(--text-body-large-weight));
  color: var(--atom-lead-color, var(--color-text-muted));
  text-transform: var(--atom-lead-transform, none);
  max-width: 52ch;
}

/* Body-long — rich-text body, markdownified. Paragraph-styling via descendants. */
.atom--body-long {
  font-family: var(--text-body-default-family);
  font-size: calc(var(--text-body-default-size) * var(--atom-body-long-size-multiplier, 1));
  line-height: var(--text-body-default-line-height);
  color: var(--atom-body-long-color, var(--color-text-default));
}
.atom--body-long > p {
  margin: 0 0 var(--space-block-default) 0;
}
.atom--body-long > p:last-child {
  margin-bottom: 0;
}
.atom--body-long a {
  color: var(--color-accent-primary);
  text-underline-offset: 3px;
}
.atom--body-long > h2,
.atom--body-long > h3 {
  margin: var(--space-block-loose) 0 var(--space-block-default) 0;
}
.atom--body-long > ul,
.atom--body-long > ol {
  padding-left: var(--space-inline-lg);
  margin: 0 0 var(--space-block-default) 0;
}
.atom--body-long > blockquote {
  border-left: 2px solid var(--color-accent-primary);
  padding-left: var(--space-inline-lg);
  margin: var(--space-block-loose) 0;
  font-family: var(--text-display-md-family);
  color: var(--color-text-default);
}

/* Meta-label — kleine ui-tekst (leestijd, datum, count). */
.atom--meta-label {
  font-family: var(--text-ui-caption-family);
  font-size: calc(var(--text-ui-caption-size) * var(--atom-meta-label-size-multiplier, 1));
  line-height: var(--text-ui-caption-line-height);
  color: var(--atom-meta-label-color, var(--color-text-subtle));
  text-transform: var(--atom-meta-label-transform, none);
}

/* ============================================================
   Action-atomen — cta_primary / cta_secondary
   ============================================================
   Atomen zelf zetten alleen typography + minimaal layout. Block-callers
   geven via blockClass-arg de visuele button-classes mee (bv. btn--primary
   voor hero, block-cta__button voor cta_banner). Atom-defaults blijven
   subtle zodat ze niet conflicteren.
*/
.atom--cta-primary,
.atom--cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-sm);
  font-family: var(--text-ui-button-family);
  font-size: var(--text-ui-button-size);
  font-weight: var(--text-ui-button-weight);
  letter-spacing: var(--text-ui-button-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.atom--cta-primary:hover,
.atom--cta-secondary:hover {
  transform: translateY(-1px);
}

/* ============================================================
   Media-atomen
   ============================================================ */

/* Media-primary — figure met img. */
.atom--media-primary {
  margin: 0;
  overflow: hidden;
}
.atom--media-primary > img {
  width: 100%;
  height: auto;
  display: block;
}