/* ────────────────────────────────────────────
   DD:s designsystem — responsiva tokenvärden.

   Speglar responsive.css i designsystemet (.claude/skills/dd-design/).
   Bricks variabelhanterare bär bara statiska värden — breakpoint-
   överstyrningarna av typskalan och sektionsrytmen ligger därför här.

   Scopat till Bricks renderingsytor, samma princip som dd-tokens.css.
   Brytpunkterna är Bricks standard: 991 / 767 / 478.

   Ändras skalan i responsive.css ska denna fil uppdateras — och tvärtom.
   Kopia i repo: docs/hemsida/bricks-child/dd-tokens-responsiv.css
   ──────────────────────────────────────────── */

@media (max-width: 991px) {
  #brx-header,
  #brx-content,
  #brx-footer {
    --display-xl: 40px;
    --display-lg: 32px;
    --display-md: 28px;
    --display-sm: 22px;
    --hero-display: 84px;
    --section-pad-y: var(--space-20);
    --display-2xl: 44px;
    --figure-display: 76px;
    --display-3xl: 54px;
    --figure-display-md: 56px;
    --figure-display-lg: 64px;
  }
}

@media (max-width: 767px) {
  #brx-header,
  #brx-content,
  #brx-footer {
    --display-xl: 32px;
    --display-lg: 28px;
    --display-md: 24px;
    --display-sm: 20px;
    --text-lg: 17px;
    --hero-display: 84px;
    --section-pad-y: var(--space-16);
    --display-2xl: 36px;
    --figure-display: 68px;
    --display-3xl: 44px;
    --figure-display-md: 48px;
    --figure-display-lg: 56px;
  }
}

@media (max-width: 478px) {
  #brx-header,
  #brx-content,
  #brx-footer {
    --display-xl: 28px;
    --display-lg: 24px;
    --display-md: 22px;
    /* Flytande — se responsive.css. Fast 68px kapades under 361px bredd. */
    --hero-display: clamp(44px, 14.4vw, 68px);
    --section-pad-y: var(--space-12);
    --display-2xl: 32px;
    --figure-display: 60px;
    /* Flytande — se responsive.css. "Direktdemokraterna" är 339px vid 40px. */
    --display-3xl: clamp(26px, 8.7vw, 40px);
    --figure-display-md: 44px;
    --figure-display-lg: 48px;
  }
}