/* Boekhoudpiloot huisstijl-tokens — gedeeld door portaal en website. */
:root {
  --blauw-900: #0B2A4A;   /* hoofd: donker cockpit-blauw */
  --blauw-700: #14406E;
  --blauw-100: #E8EFF7;
  --oranje-500: #F5711D;  /* signaal: CTA's, badges, to-do */
  --oranje-600: #D95F10;
  --wit: #FFFFFF;
  --grijs-100: #F4F6F8;
  --grijs-300: #D9E0E7;
  --grijs-600: #5A6B7C;
  --inkt: #17222E;
  --groen-ok: #1E8A5A;
  --rood-alarm: #C0392B;
  --radius: 12px;
  --tap-min: 44px;
  --schaduw: 0 1px 4px rgba(11, 42, 74, 0.10);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--inkt);
  background: var(--grijs-100); font-size: 16px; line-height: 1.5;
}
h1 { font-size: 1.35rem; margin: 0 0 .75rem; color: var(--blauw-900); }
h2 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; color: var(--blauw-900); }
a { color: var(--blauw-700); }
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap-min); padding: .6rem 1.2rem; border: 0; cursor: pointer;
  border-radius: var(--radius); font-size: 1rem; font-weight: 600;
  background: var(--oranje-500); color: var(--wit); text-decoration: none;
}
.knop:active { background: var(--oranje-600); }
.knop-stil { background: var(--wit); color: var(--blauw-900);
             border: 1.5px solid var(--grijs-300); }
.knop-klein { min-height: 36px; padding: .3rem .8rem; font-size: .9rem; }
.cijfer-groot { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
                letter-spacing: -0.5px; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 99px;
         font-size: .72rem; font-weight: 700; vertical-align: middle; }
.badge-test { background: var(--oranje-500); color: var(--wit); }
.badge-oranje { background: var(--oranje-500); color: var(--wit); }
.badge-groen { background: var(--groen-ok); color: var(--wit); }
.badge-rood { background: var(--rood-alarm); color: var(--wit); }
.badge-grijs { background: var(--grijs-300); color: var(--inkt); }