/* GEGENEREERD — NIET HANDMATIG EDITEN.
   Bron: 01-brand/design-system/{tokens,vormen} · regenereren:
   node 07-scripts/studio/bouw-bb-canon.mjs
   Gebruik: <link rel="stylesheet" href="slop-check-assets/bb-canon.css"> vóór de
   pagina-eigen <style>. Fontnamen zijn de canon-namen: "Momo Trust Display",
   "Momo Trust Sans", "Lilita One". */

/* ─── uit 01-brand/design-system/tokens/colors.css ─────────────────────────── */
/* ============================================================================
   Blitz Branders — Colors  (GELOCKT 2026-06-23 · "groovy pop" ·
   KLEUR-SWAP 2026-07-10, Britts besluit: kobalt #3D43DB → #4B53CA + nieuw
   diepblauw #2F36A1 — het elektrische kobalt vloekte met de nieuwe banners)
   Duotone motor: kobalt <-> creme/blush flipt voor/achtergrond.
   OLIJF ERUIT 2026-08-21 (Britt): de afsluitende CTA-band was het laatste gebruik en
   staat sindsdien op de paginagrond zelf. --color-surface-deep = diepblauw.
   Blauw blijft dezelfde hue (~236) — alleen gedempt/dieper, geen hue-drift.
   Bron/rationale: 01-brand/rebrand-2026/palet.md (WCAG-tabel nagerekend)
============================================================================ */

:root {
  /* ---- PRIMITIVES (de gelockte kleuren; gebruik liever de semantische aliassen) */
  --bb-room:   #F5EFE1;  /* creme papier — de canvas */
  --bb-blush:  #F7E1DC;  /* zacht roze — sectie-wash / counter */
  --bb-inkt:   #1A1916;  /* warm bijna-zwart — tekst + swirl-zwart */
  --bb-roet:   #574F45;  /* gedempt bruin-grijs — secundaire tekst */
  --bb-blauw:  #4B53CA;  /* kobalt (gedempt) — PRIMAIR (was #3D43DB tot 10-07) */
  --bb-diepblauw: #2F36A1;  /* diep kobalt — flowing-tekst / donker accent (nieuw 10-07, was #232A78 on-page) */
  --bb-snoep:  #F4C6E6;  /* snoeproze pop */
  --bb-iris:   #CBCCF6;  /* lavendel/periwinkle pop */

  /* ---- SEMANTIC — GEBRUIK DEZE IN COMPONENTS -------------------------------- */
  /* Oppervlakken */
  --color-surface:        var(--bb-room);   /* standaard pagina-achtergrond   */
  --color-surface-soft:   var(--bb-blush);  /* verhoogd / zacht sectie-vlak   */
  --color-surface-pop-1:  var(--bb-snoep);  /* speels highlight-vlak          */
  --color-surface-pop-2:  var(--bb-iris);   /* speels highlight-vlak          */
  --color-surface-deep:   var(--bb-diepblauw); /* donkere "kamer" (CTA/sectie) */
  --color-surface-ink:    var(--bb-inkt);   /* zwart vlak / liquid-swirl      */

  /* Tekst */
  --color-text:           var(--bb-inkt);   /* body + koppen op licht (AAA)   */
  --color-text-soft:      var(--bb-roet);   /* secundaire tekst (AA)          */
  --color-text-on-blue:   var(--bb-room);   /* tekst op --color-primary (AA)  */
  --color-text-on-deep:   var(--bb-room);   /* tekst op diepblauw/inkt (AAA)  */

  /* Merk / interactie */
  --color-primary:        var(--bb-blauw);  /* hoofdkleur: mark, koppen, knop */
  --color-on-primary:     var(--bb-room);   /* tekst op primary (AA)          */
  --color-link:           var(--bb-blauw);  /* links op creme (AA)            */
  --color-border:         var(--bb-inkt);   /* lijnen / 1.5px randen          */

  /* Focus-ring (a11y) — iris ring op alles */
  --color-focus:          var(--bb-iris);
}

/* ---- CONTRAST -------------------------------------------------------------
   De nagerekende ratio's staan op ÉÉN plek: DESIGN.md §Colors → "Contrast-regels
   (WCAG)". Ze stonden hier ook, met eigen getallen, en die liepen uiteen (hier
   4.15 / 4.94 tegen 4,20 / 4,95 in DESIGN.md — 21-08 opgemerkt). Twee tabellen
   voor dezelfde meting is precies hoe canon gaat driften, dus deze is weg.

   De vuistregel in één regel: kobalt mag als tekst op crème en blush; op een
   gekleurde grond (snoep, iris) of op donker neem je diepblauw. Kobalt blijft de
   actie-kleur op een knopvlak met crème tekst. Meten doet de design-linter
   (07-scripts/design-qa) — die toetst de échte gerenderde kleuren, inclusief alpha.
----------------------------------------------------------------------------- */


/* ─── uit 01-brand/design-system/tokens/spacing.css ─────────────────────────── */
/* ============================================================================
   Blitz Branders — Spacing, radius, layout  (OPEN-laag, vastgelegd door DS)
   Basis 4px. Radius = HIERARCHIE (niet uniform) = craft-credit tegen AI-tell #7.
   GELOCKT 2026-07-08 (Britt, design-system-consolidatie) — was de open chunk-7-laag.
============================================================================ */

:root {
  /* ---- Spacing-schaal (4px basis) --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radius-HIERARCHIE (bewust gevarieerd, niet 1 radius overal) ------- */
  --radius-pill:  999px;   /* chips, badges, pills, ronde knoppen  */
  --radius-lg:    18px;    /* cards / tiles / container            */
  --radius-md:    12px;    /* primaire knop, velden                */
  --radius-sm:    10px;    /* secundaire knop, kleine controls     */
  --radius-xs:    8px;     /* inner elements, inputs               */

  /* ---- Rand-diktes ------------------------------------------------------ */
  --border-hair:  1.5px;   /* standaard lijn (inkt)                */
  --border-bold:  2px;     /* nadruk / sectie-scheiding            */

  /* ---- Layout ----------------------------------------------------------- */
  --maxw-prose:   68ch;    /* leesbreedte body                     */
  --maxw-content: 1180px;  /* content-container                    */
  --maxw-wide:    1360px;  /* brede secties                        */
  /* pagina-marge */
  --gutter:       clamp(18px, 5vw, 56px); /* @kind spacing */

  /* ---- Breakpoints (als referentie; CSS gebruikt media-queries) --------- */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1180px;
}


/* ─── uit 01-brand/design-system/tokens/effects.css ─────────────────────────── */
/* ============================================================================
   Blitz Branders — Effects: textuur · schaduw · motion  (gedeeltelijk gelockt)
   GELOCKT: grain · riso-overprint · liquid-swirl (recept 2026-06-23, chunk 2).
   GELOCKT 2026-07-08 (consolidatie): offset-schaduw-systeem · motion-tokens.
   Diepte = laag/overlap/OFFSET-SCHADUW — nooit glas/glow/gradient/swirl-als-vulling.
============================================================================ */

:root {
  /* ---- 1. TEXTUUR (gelockt) --------------------------------------------- */
  /* Grain: fijne film/print-ruis (inline SVG, geen externe asset — AVG + perf) */
  --bb-tex-grain:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); /* @kind other */
  --bb-grain-opacity: 0.12; /* @kind other */

  /* Liquid-swirl: groovy 70s inkt-banden — ALLEEN achtergrond/wereld-signatuur,
     NOOIT als vulling op een knop of kaart (expliciet afgekeurd). */
  --bb-tex-swirl:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 200' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%231A1916' stroke-width='26' stroke-linecap='round'><path d='M-30,36 C70,-6 130,78 230,36 S380,-6 470,36'/><path d='M-30,100 C70,58 130,142 230,100 S380,58 470,100'/><path d='M-30,164 C70,122 130,206 230,164 S380,122 470,164'/></g></svg>"); /* @kind other */

  /* ---- 2. OFFSET-SCHADUW-SYSTEEM (de knop-signatuur, hard offset i.p.v. blur) */
  --shadow-offset-sm: 3px 4px 0 rgba(26, 25, 22, 0.22);
  --shadow-offset-md: 4px 5px 0 rgba(26, 25, 22, 0.20);
  --shadow-offset-lg: 6px 8px 0 rgba(26, 25, 22, 0.24);
  --shadow-offset-press: 1px 2px 0 rgba(26, 25, 22, 0.30);
  /* op donkere grond (diepblauw/inkt): harder */
  --shadow-offset-on-deep: 3px 4px 0 rgba(0, 0, 0, 0.40);

  /* ---- 2b. DUBBELDRUK-DIEPTE (kaart-signatuur, 2026-08-13) ---------------
     Een tweede drukgang in plaats van een grijze schaduw: een kleurvlak 8×7px
     achter de kaart, dat vlak zélf omlijnd, met de inktcontour ín de kaart.
     Ontstaan in de ruis-sectie (Britts akkoord 13-08) en dezelfde dag tot
     kaart-taal van de homepage-middenmoot gemaakt — dat maakte de tweedeling
     ongedaan waarbij de nieuwste secties in kleur drukten en de oudere een
     vlakke offset hielden. Werkt op elke grond: de omlijning van het vlak houdt
     het leesbaar op crème én op diepblauw.
     De vlakke `--shadow-offset-*` blijven gelden — die zijn de knop-signatuur.

     ⚠ `--shadow-print-plate` WERKT NIET VAN BUITEN DIT TOKEN. Hier stond dat de
     plaatkleur "per kaart via --shadow-print-plate" ingesteld wordt; dat is
     nagemeten onwaar (22-08). Een custom property wordt gesubstitueerd op het
     element waar hij gedeclareerd staat, en dit token staat op `:root` — dus de
     var hierónder is daar al vervangen door de fallback. Een override op een
     afstammeling doet niets: op /websites en de homepage vroegen zeven kaarten
     iris en schilderden ze alle zeven snoep. Sitebreed ~17 call-sites.
     **Britts besluit 23-08: NIET repareren.** Dit is dus geen open bug maar de
     werking: élke `var(--shadow-print)` drukt snoep. Wil een kaart een andere
     plaatkleur, schrijf de box-shadow dan in dat component uit (zie
     `PakkettenCarrousel.astro` / `ReviewsSection.astro`) — en verwacht niet dat
     `--shadow-print-plate` iets doet. Alleen dit commentaar is bijgewerkt; aan de
     waarde is niets veranderd. */
  --shadow-print:
    inset 0 0 0 1.5px var(--color-border),
    8px 7px 0 0 var(--shadow-print-plate, var(--color-surface-pop-1)),
    8px 7px 0 1.5px var(--color-border);

  /* ---- 3. MOTION-TOKENS (formeel — was open, nu vastgelegd) -------------- */
  /* micro-feedback (arrow-shift, tint) */
  --dur-quick:  0.16s; /* @kind other */
  /* standaard hover/press */
  --dur-base:   0.26s; /* @kind other */
  /* entrance / reveal */
  --dur-slow:   0.42s; /* @kind other */
  /* vlinder-flap (hero-CTA) */
  --dur-flutter: 0.34s; /* @kind other */

  /* soepel uitlopen */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  /* veer-overshoot (primair) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}

/* ============================================================================
   TEXTUUR-UTILITIES (drop-in)
============================================================================ */

/* GRAIN — leg fijne print-ruis over een element (position:relative nodig). */
.bb-grain { position: relative; }
.bb-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: var(--bb-grain-opacity);
  mix-blend-mode: multiply;
  background-image: var(--bb-tex-grain);
}
/* Variant voor de hele pagina (fixed, dekt de viewport). */
.bb-grain-page::after { position: fixed; z-index: 9999; }

/* RISO-OVERPRINT — egale vlakken die mengen i.p.v. gladde gradient. */
.bb-overprint { position: relative; }
.bb-overprint > .bb-ink { mix-blend-mode: multiply; }

/* LIQUID-SWIRL — groovy inkt-banden als achtergrond op een pop-vlak. */
.bb-swirl {
  background-color: var(--color-surface-pop-1);   /* default: snoep */
  background-image: var(--bb-tex-swirl);
  background-size: cover;
  background-position: center;
}

/* ============================================================================
   REDUCED MOTION / PRINT — textuur is decoratief, mag weg
============================================================================ */
@media print {
  .bb-grain::after, .bb-grain-page::after { display: none; }
}


/* ─── uit 01-brand/design-system/tokens/typography.css ─────────────────────────── */
/* ============================================================================
   Blitz Branders — Typography  (HARD-GELOCKT 2026-06-23 · systeem B)
   Momo Trust Display (koppen) + Momo Trust Sans (body/UI) + Lilita One (accent).
   Self-hosted woff2 — GEEN Google-CDN (AVG). Bron/rationale: 01-brand/rebrand-2026/typografie.md
   --text-h1 TOEGEVOEGD 2026-08-21 (Britts keuze A in het kopmaat-beslislab): de maat die de
   editorial kop al had is nu een canon-stap i.p.v. een losse clamp met "finetune-knop" erbij.
   54px op 1440, 32px op 390. Tussen hero en h2 zat geen maat; nu wel.
============================================================================ */

/* ---- @font-face (self-hosted) -------------------------------------------- */
@font-face {
  font-family: "Momo Trust Display";
  src: url("MomoTrustDisplay-Regular.woff2") format("woff2");
  font-weight: 400;            /* SINGLE WEIGHT — nooit faux-bold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Momo Trust Sans";
  src: url("MomoTrustSans-var.woff2") format("woff2");
  font-weight: 200 800;         /* echte variabele range 200-800 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lilita One";
  src: url("LilitaOne-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Font-rollen ------------------------------------------------------- */
  --font-display: "Momo Trust Display", Georgia, serif;   /* single weight 400 */
  --font-body:    "Momo Trust Sans", system-ui, sans-serif; /* var 200-800 */
  --font-accent:  "Lilita One", system-ui, sans-serif;    /* chunky header, kobalt */
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace; /* labels/meta */

  /* ---- Type-scale ------------------------------------------------------- */
  --text-hero:  clamp(2.4rem, calc(1rem + 6vw), 5.5rem);   /* hero-kop (Display)      */
  --text-h1:    clamp(2rem, 1.2rem + 3.2vw, 3.4rem);       /* paginakop (Display)     */
  --text-h2:    clamp(1.6rem, 3vw, 2.6rem);                /* sectiekop               */
  --text-h3:    clamp(1.2rem, 2vw, 1.6rem);                /* subkop (Sans Semibold)  */
  --text-body:  1.0625rem;                                 /* body (>=16px, vast)     */
  --text-small: 0.8125rem;                                 /* labels/caption          */
  --text-chunk: clamp(2rem, 6vw, 6rem);                    /* Lilita header-accent    */

  /* ---- Gewichten (alleen Sans heeft echt gewicht) ----------------------- */
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ---- Tracking / line-height ------------------------------------------- */
  --tracking-lilita:  -0.03em;   /* uppercase, strak */
  --tracking-display: -0.01em;   /* Momo koppen, licht strak */
  --tracking-body:    0;
  --leading-tight:    1.0;
  --leading-snug:     1.2;
  --leading-body:     1.55;
}


/* ─── uit 01-brand/design-system/vormen/vormen.css ─────────────────────────── */
/* ============================================================================
   vormen.css — laag-basis + motion-presets van de BB-vormenbibliotheek
   (fase 2, 2026-08-27 · presets gelockt op lab-v3: wiebel · adem · twinkel ·
   draai-in · knipoog, DECISIONS 27-08).

   Regels die geen smaak zijn (lab-lessen, gelockt):
   - druk-offsets als CSS `translate`-property: een eigen property botst niet met
     transform-animaties, dus de echo-verschuiving blijft staan terwijl de laag
     wiebelt of ademt;
   - keyframes op de LAAG-elementen zelf, nooit op een omhullende groep — een
     transform-wrapper om een multiply-echo maakt een stacking context en dooft
     de druk-menging (kleur-drift die de linter flagt);
   - alle animatie-declaraties staan BINNEN no-preference: met reduced-motion
     bestáát er geen animatie en staat alles vol zichtbaar stil;
   - beweging is opt-in per plek via het data-anim-attribuut op de vorm-wrapper.

   Gebruik: wrapper (svg of <bb-vorm>) draagt class="bbv" + optioneel
   data-anim="wiebel|adem|twinkel|draai-in|knipoog".
============================================================================ */

/* wrapper-maat: de vorm vult zijn vak, de aanroeper bepaalt de breedte */
svg.bbv { display: block; width: 100%; height: auto; overflow: visible; }
bb-vorm.bbv { display: block; }
bb-vorm.bbv > svg { display: block; width: 100%; height: auto; overflow: visible; }

.bbv .laag { transform-box: fill-box; transform-origin: center; }
.bbv .off-echo { translate: 9px 7px; }
.bbv .off-vlak { translate: 4.5px 3.5px; }
.bbv .off-lijn { translate: 3.5px 2.5px; }
.bbv .mis { mix-blend-mode: multiply; }

/* knipoog: het dichte oog is standaard onzichtbaar — óók zonder animatie
   (reduced-motion toont dan het open oog: de volle statische staat) */
.bbv .oog-dicht { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .bbv[data-anim="wiebel"] .laag { animation: bbv-wiebel 3.4s ease-in-out infinite alternate; }
  .bbv[data-anim="adem"] .laag { animation: bbv-adem 3s ease-in-out infinite; }

  .bbv[data-anim="twinkel"] .vonk { animation: bbv-twinkel 2.2s ease-in-out infinite; }
  .bbv[data-anim="twinkel"] .vonk:nth-of-type(2) { animation-delay: 0.5s; }
  .bbv[data-anim="twinkel"] .vonk:nth-of-type(3) { animation-delay: 1.1s; }

  .bbv[data-anim="draai-in"] .laag { animation: bbv-draai 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

  .bbv[data-anim="knipoog"] .oog-open { animation: bbv-knip-open 2.6s linear infinite; }
  .bbv[data-anim="knipoog"] .oog-dicht { animation: bbv-knip-dicht 2.6s linear infinite; }
}

@keyframes bbv-wiebel { from { transform: rotate(-2.5deg); } to { transform: rotate(2deg); } }
@keyframes bbv-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes bbv-twinkel { 0%, 100% { opacity: 0.25; transform: scale(0.72); } 50% { opacity: 1; transform: scale(1); } }
@keyframes bbv-draai { from { transform: rotate(-9deg) scale(0.72); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes bbv-knip-dicht { 0%, 82% { opacity: 0; } 86%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes bbv-knip-open { 0%, 82% { opacity: 1; } 86%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }


/* ─── uit 01-brand/design-system/components/knop.css ─────────────────────────── */
/* ─── Knop — de drie gelockte rollen, als losse CSS voor pagina's buiten Astro ────────────
   Tweeling van `03-website/src/components/ui/Button.astro`. Het contract is DESIGN.md
   §"Button — 3 rollen [gemeten]": hero 18px · primair 12px · secundair 10px, allemaal Sans 800,
   line-height 1, rand 1,5px inkt, harde offset-schaduw, focus-ring 3px iris. Wijzig je hier iets,
   wijzig dan ook Button.astro — of andersom. Twee bronnen die uit elkaar lopen is precies de fout
   die dit bestand moet voorkomen.

   WAAROM DIT BESTAND BESTAAT (04-09). De Studio-pagina's (05-content/lead-magnets) en /links zijn
   losse HTML zonder Astro. Elke pagina had een eigen knoprecept: gemeten 21 knopvormen, gewicht
   700 én 800, wel/geen inktrand, wel/geen schaduw, een pill-vormige submit naast een 10px-knop.
   Britt op 03-09: "niet alle knoppen zijn gelijk en goed, afronding verschilt per knop." Overtypen
   is hoe canon drift; daarom één recept, meegebakken in bb-canon.css door
   `07-scripts/studio/bouw-bb-canon.mjs`.

   Gebruik:  <a class="bb-btn bb-btn--primary" href="…">Direct downloaden →</a>
             <button class="bb-btn bb-btn--secondary" type="button">← Terug</button>
             op diepblauw/inkt grond: extra klasse `is-on-deep` (hardere schaduw).
   Kleine controls (kopieerknop bij een promptblok, een + in een tool) zijn GEEN knoprol; die
   houden hun eigen recept: crème vlak, inktrand, radius-xs, min. 44px hoog. */

.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  box-sizing: border-box;
  min-height: 44px;                       /* WCAG-raakvlak, ook op de kleinste rol */
  font-family: var(--font-body);
  font-weight: var(--weight-extrabold);   /* Sans heeft echt gewicht */
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: var(--border-hair) solid var(--color-border);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.bb-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ROL 1 · hero — crème, inkt→kobalt, radius-lg. Max één per scherm, alleen op licht. */
.bb-btn--hero {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  font-size: 1.16rem;
  padding: 1.05em 2.2em;
  box-shadow: var(--shadow-offset-md);
}
.bb-btn--hero:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-offset-lg);
}
.bb-btn--hero:active {
  transform: translateY(0);
  box-shadow: var(--shadow-offset-press);
}

/* ROL 2 · primair — kobalt, crème tekst, radius-md. Hover = inkt vlak, press = scale. */
.bb-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-md);
  font-size: 1.02rem;
  padding: 0.95em 1.55em;
  box-shadow: var(--shadow-offset-sm);
}
.bb-btn--primary:hover {
  background: var(--color-surface-ink);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-offset-lg);
}
.bb-btn--primary:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: var(--shadow-offset-press);
}

/* ROL 3 · secundair — crème + inktrand, radius-sm. Hover = blush, 2px omhoog. */
.bb-btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  padding: 0.85em 1.4em;
  box-shadow: var(--shadow-offset-sm);
}
.bb-btn--secondary:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-offset-md);
}
.bb-btn--secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-offset-press);
}

/* Op donkere grond (diepblauw/inkt) → hardere schaduw. */
.bb-btn.is-on-deep { box-shadow: var(--shadow-offset-on-deep); }

.bb-btn[disabled],
.bb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bb-btn { transition: none; }
  .bb-btn:hover,
  .bb-btn:active { transform: none; }
}

@media print {
  .bb-btn { box-shadow: none; }
}