/* =====================================================================
   Variant A — Modern & clean (light, tech-SaaS)
   Zet de semantische kleur-variabelen voor de lichte stijl.
   ===================================================================== */
:root {
  color-scheme: light;

  --bg:            #ffffff;
  --bg-tint:       var(--paper);            /* zachte afwisselende secties */
  --surface:       #ffffff;
  --surface-2:     #f1f2f5;
  --surface-glass: rgba(255,255,255,0.72);

  --text:          #3b3f47;
  --text-muted:    #5c616b;
  --text-strong:   #15171c;

  --border:        rgba(18,19,22,0.10);
  --border-strong: rgba(18,19,22,0.18);

  --accent:        var(--bbs-orange);
  --accent-strong: var(--bbs-orange-600);
  --accent-soft:   #fff3e6;
  --accent-glow:   rgba(237,125,28,0.45);

  --header-bg:     rgba(255,255,255,0.78);
  --header-border: rgba(18,19,22,0.08);

  --shadow-sm: 0 1px 2px rgba(18,19,22,0.06), 0 2px 6px rgba(18,19,22,0.05);
  --shadow-md: 0 10px 30px -12px rgba(18,19,22,0.18);
  --shadow-lg: 0 30px 60px -22px rgba(18,19,22,0.22);

  /* Sfeer-achtergrond hero */
  --hero-grid: rgba(18,19,22,0.045);
  --hero-glow-1: rgba(237,125,28,0.16);
  --hero-glow-2: rgba(43,182,196,0.14);

  /* Logo-mark in nav: donker op licht */
  --mark-shape: var(--ink);
}