/*
 * Businesspoint huisstijl - design tokens
 * ---------------------------------------------------------------------------
 * Pas ALLEEN dit bestand (en assets/logo.png) aan om de uitstraling af te
 * stemmen op de webshop. app.css gebruikt uitsluitend deze tokens.
 *
 * Kleuren gemeten op www.businesspoint.nl (september 2026).
 */
:root {
  /* Merkkleur: aubergine, gebruikt voor koppen, knoppen, randen en accenten */
  --bp-primary: #691d5b;
  --bp-primary-hover: #52164a;
  --bp-primary-soft: #f4ecf2;   /* lichte tint voor achtergronden/hover */
  --bp-primary-line: #d9c2d4;   /* lichte tint voor lijnen */
  --bp-on-primary: #ffffff;

  /* Statuskleuren (alleen voor de zendingstatus) */
  --bp-success: #1e8a4f;
  --bp-success-soft: #e6f4ec;
  --bp-warning: #a85a00;
  --bp-warning-soft: #fdf1e1;
  --bp-danger: #c0392b;
  --bp-danger-soft: #fbeceb;
  --bp-info: #691d5b;
  --bp-info-soft: #f4ecf2;

  /* Neutralen (zoals de webshop: wit, zwarte prijzen, grijze randen) */
  --bp-bg: #ffffff;
  --bp-surface: #ffffff;
  --bp-subtle: #f7f7f8;
  --bp-border: #e3e3e6;
  --bp-border-strong: #707070;
  --bp-text: #212529;
  --bp-text-strong: #000000;
  --bp-text-muted: #6c6f75;

  /* Typografie. Gebruikt de webshop een eigen webfont? Zet de fontbestanden in
     assets/fonts/, voeg hier een @font-face toe en zet de naam vooraan. */
  --bp-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Vorm (webshop: kleine afronding op knoppen, pil-vormige zoekbalk) */
  --bp-radius: 6px;
  --bp-radius-sm: 4px;
  --bp-radius-pill: 999px;
  --bp-shadow: 0 1px 2px rgba(33, 37, 41, .04), 0 2px 10px rgba(33, 37, 41, .05);
}