/* ============================================================================
   Kredietbewust.nl — huisstijl design tokens (MASTER)
   Bron van waarheid. build.ps1 kopieert deze sheet naar:
     kb-frontend/assets/css/brand.css
     kb-backoffice/assets/css/brand.css
   Nooit hex-codes hardcoden in pagina-CSS — altijd via deze tokens.
   Stijl: "Klarna, maar bancair rustig" — zachte rood/roze tinten, veel wit,
   afgeronde hoeken, dunne rustige typografie. Zie BRAND.md.
   ========================================================================== */

:root {
  /* -- Inkt (warme bijna-zwarten, geen koud slate) -- */
  --kb-ink:          #1d1420;
  --kb-ink-2:        #453a4d;
  --kb-ink-3:        #5d5164;
  --kb-muted:        #75677c;

  /* -- Vlakken -- */
  --kb-bg:           #ffffff;
  --kb-bg-soft:      #fdf4f6;   /* zachtroze sectie-achtergrond */
  --kb-bg-blush:     #fbe9ee;   /* kaart-tint, icoon-achtergrond */
  --kb-bg-card:      #ffffff;
  --kb-line:         #f2e4e9;
  --kb-line-2:       #f7edf1;

  /* -- Merk-accent (framboos + klarna-roze) -- */
  --kb-primary:      #e2506e;
  --kb-primary-deep: #c73a59;
  --kb-primary-soft: #fceef2;
  --kb-pink:         #ffb3c7;
  --kb-grad:         linear-gradient(135deg, #e2506e 0%, #d84a78 55%, #c73a59 100%);
  --kb-grad-soft:    linear-gradient(135deg, #fdf0f3 0%, #fbe9ee 60%, #f9e3ec 100%);

  /* -- Tweede accent (berry/plum, warme roze-familie — nooit koud blauw) -- */
  --kb-berry:        #b0436b;
  --kb-berry-deep:   #8f335a;
  --kb-berry-soft:   #f7e6ef;
  --kb-plum:         #7b3f68;

  /* -- Neutraal grijs (DigiBoox-look sectie-achtergrond, warm) -- */
  --kb-grey:         #faf6f8;

  /* -- Status (alleen in dashboards / resultaten) -- */
  --kb-ok:           #1f9d6b;
  --kb-ok-soft:      #e7f6ef;
  --kb-warn:         #b7791f;
  --kb-warn-soft:    #fdf3e0;
  --kb-err:          #c2413b;
  --kb-err-soft:     #fdecea;

  /* -- Footer (warm donker) -- */
  --kb-footer:       #241a28;
  --kb-footer-ink:   #cbbfd1;
  --kb-footer-title: #f5eef7;
  --kb-footer-line:  rgba(255, 255, 255, .08);

  /* -- Typografie: vriendelijk-rond (DigiBoox-look), rustig in kleur -- */
  --kb-font:         'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kb-fw-body:      400;
  --kb-fw-medium:    600;
  --kb-fw-head:      800;
  --kb-lh-body:      1.65;
  --kb-ls-head:      -.02em;

  /* -- Vorm -- */
  --kb-radius-s:     10px;
  --kb-radius:       14px;
  --kb-radius-l:     20px;
  --kb-shadow:       0 1px 2px rgba(29, 20, 32, .04), 0 10px 30px -6px rgba(29, 20, 32, .08);
  --kb-shadow-lift:  0 4px 10px rgba(199, 58, 89, .12), 0 18px 44px -8px rgba(29, 20, 32, .14);
  --kb-shadow-pop:   0 14px 40px rgba(29, 20, 32, .14);

  /* -- Maatvoering -- */
  --kb-wrap:         1200px;
  --kb-section-pad:  clamp(64px, 9vw, 110px);
}

/* Basis-typografie binnen KB-scopes (marketing én dashboards) */
.kb-scope {
  font-family: var(--kb-font);
  color: var(--kb-ink);
  font-weight: var(--kb-fw-body);
  -webkit-font-smoothing: antialiased;
}
.kb-scope p { line-height: var(--kb-lh-body); color: var(--kb-ink-2); }
.kb-scope h1, .kb-scope h2, .kb-scope h3 {
  letter-spacing: var(--kb-ls-head);
  font-weight: var(--kb-fw-head);
  color: var(--kb-ink);
}
.kb-scope .kb-amount { font-variant-numeric: tabular-nums; }

/* Knoppen — overal identiek */
.kb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--kb-radius-s);
  font-family: var(--kb-font); font-size: .95rem; font-weight: 650;
  text-decoration: none; cursor: pointer; border: 0; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.kb-btn--primary { color: #fff; background: var(--kb-grad); box-shadow: 0 2px 10px rgba(226, 80, 110, .3); }
.kb-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(226, 80, 110, .42); }
.kb-btn--ghost { color: var(--kb-ink-2); background: transparent; border: 1px solid var(--kb-line); }
.kb-btn--ghost:hover { background: var(--kb-bg-soft); color: var(--kb-ink); }

/* Verplichte kredietwaarschuwing — op elke publieke pagina (zie BRAND.md) */
.kb-warning-bar {
  background: #fff; border-top: 1px solid var(--kb-line);
  padding: 14px 20px; text-align: center;
  font-family: var(--kb-font); font-size: .88rem; font-weight: 650; color: var(--kb-ink);
}
.kb-warning-bar span { display: inline-flex; align-items: center; gap: 10px; }