/* House of Bubbles — design tokens (canonieke bron; gespiegeld in Elementor Global Kit) */
:root {
  /* ---- Merkpalet (brandbook 180626, exact) ---- */
  --hob-ivory:      #F2F2F2; /* Soft Ivory Grey  — paginabg */
  --hob-champagne:  #DAD4C2; /* Vintage Champagne — getinte vlakken */
  --hob-gold:       #C1A46D; /* Champagne Gold   — decoratief accent */
  --hob-espresso:   #332B22; /* Deep Espresso    — tekst + donkere secties */
  --hob-olive:      #6C673F; /* Olive Brass      — primaire CTA + banden */

  /* ---- Afgeleiden ---- */
  --hob-surface:    #FAF9F6; /* warm off-white — kaartvlak (brandbook heeft geen wit) */
  --hob-white:      #FFFFFF;
  --hob-olive-hover:#5B5635;
  --hob-gold-hover: #B3925B;
  --hob-text:       #332B22;
  --hob-text-muted: #6B6457;
  --hob-border:     #E2DED3;
  --hob-on-dark:    #F2F2F2;
  --hob-bg-soft:    #F6F6F3; /* hero/CTA/header achtergrond */
  --hob-secondary:  #D1D0C0; /* secundaire knop bg */
  --hob-secondary-text: #24211C; /* secundaire knop tekst */

  /* ---- Semantische rollen ---- */
  --hob-bg:         var(--hob-ivory);
  --hob-bg-dark:    var(--hob-espresso);
  --hob-primary:    var(--hob-olive);
  --hob-on-primary: var(--hob-ivory);
  --hob-accent:     var(--hob-gold);
  --hob-heading:    var(--hob-espresso);

  /* ---- Typografie ---- */
  /* Avenir eerst (Apple/licentie), anders Mulish */
  --hob-font-body: "Avenir Next", "Avenir", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hob-font-head: var(--hob-font-body);
  --hob-fw-thin:   300;
  --hob-fw-book:   400;
  --hob-fw-medium: 500;
  --hob-fw-bold:   700;
  --hob-fw-black:  800;

  /* Type scale (clamp: mobiel → desktop) */
  --hob-h1: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);   /* 34 → 56 */
  --hob-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);   /* 28 → 40 */
  --hob-h3: clamp(1.3125rem, 1.1rem + 0.9vw, 1.625rem);/* 21 → 26 */
  --hob-h4: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);/* 19 → 22 */
  --hob-body-lg: 1.125rem; /* 18 */
  --hob-body:    1rem;     /* 16 — nooit lager */
  --hob-eyebrow: 0.8125rem;/* 13 */
  --hob-lh-head: 1.12;
  --hob-lh-body: 1.6;

  /* ---- Vorm / ruimte / schaduw / motion ---- */
  --hob-radius:      12px;
  --hob-radius-card: 20px;
  --hob-radius-pill: 999px;
  --hob-radius-cart: 32px;
  --hob-shadow-sm: 0 1px 3px rgba(51,43,34,.06);
  --hob-shadow:    0 8px 30px rgba(51,43,34,.10);
  --hob-ease: .28s cubic-bezier(.4, 0, .2, 1);
  --hob-container: 1200px;
  --hob-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
}