/* ============================================================
   HAPPYFLEX — Design tokens (anchor-palet uit de app + web-schaal)
   ============================================================ */
:root {
  /* Merk — navy */
  --navy:        #163E6F;
  --navy-700:    #18456f;
  --navy-deep:   #16263b;   /* sidebar/footer */
  --navy-50:     #eef3fa;
  --navy-100:    #dfeaf6;

  /* Accent — coral (zeldzaam: alleen primaire CTA / urgentie) */
  --coral:       #FF6B3D;
  --coral-hover: #ec5a2c;
  --coral-soft:  #fff1ea;

  /* Neutralen */
  --bg:          #F6F7F9;
  --panel:       #FFFFFF;
  --panel-2:     #fbfcfd;
  --line:        #E6E9EF;
  --line-2:      #eef1f5;

  /* Tekst */
  --ink:         #1B2430;
  --ink-soft:    #3a4658;
  --muted:       #6B7686;

  /* Status (badges/feedback — niet decoratief) */
  --ok:    #1f8a5b;  --ok-bg:    #e7f5ee;  --ok-bd:    #bfe6d2;
  --warn:  #d9822b;  --warn-bg:  #fbf0e1;  --warn-bd:  #f0d6ad;
  --danger:#d23f3f;  --danger-bg:#fbe9e9;  --danger-bd:#f0c4c4;
  --info:  #2a6fdb;  --info-bg:  #e8f0fc;  --info-bd:  #c2d8f6;

  /* Vorm */
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --r-pill: 999px;

  /* Schaduwen — subtiel, gelaagd */
  --sh-1: 0 1px 2px rgba(22,38,59,.04), 0 2px 8px rgba(22,38,59,.05);
  --sh-2: 0 4px 12px rgba(22,38,59,.08), 0 12px 28px rgba(22,38,59,.07);
  --sh-3: 0 18px 50px rgba(22,38,59,.16), 0 6px 18px rgba(22,38,59,.10);

  /* Type */
  --font: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
}