/* Pinky Rose design system: wit papier, zwarte inkt, één rose accent voor het resultaat (de klant). */
:root {
  --paper: #ffffff;
  --ink: #1a1a1a;
  --ink-muted: #6b6b6b;
  --rose: #c0396b;
  --ander: #0f9d8a; /* markering: zaak staat deze week bij een andere accountmanager */
  --on-rose: #ffffff;
  --rule: #e5e5e5;
  --land: #f7f5f6;
  --water: #cfe2ee;
  --weg: #e3e0e2;
  --weg-groot: #cdc9cc;
  --g-kans: #00695c;
  --g-checken: #f2a900;
  --g-standaard: #3f6fb5;
  --stip-rustig: #c4c4c4;
  --stip-standaard: #3f6fb5;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1a1a; --ink: #ffffff; --ink-muted: #b3b3b3; --rose: #d86a94; --ander: #3fd0bd; --on-rose: #1a1a1a; --rule: #3a3a3a;
    --land: #1a1a1a; --water: #2b4a63; --weg: #4a4a4a; --weg-groot: #707070; --g-kans: #2fc4ad; --g-checken: #ffc233; --g-standaard: #7aa3e8;
    --stip-rustig: #5a5a5a; --stip-standaard: #7aa3e8; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 14px/20px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.kicker { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }
h1 { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; margin: var(--space-1) 0 0; text-wrap: balance; }
.logo { width: 76px; height: auto; flex: none; display: block; }
.logo-wit { display: none; }
@media (prefers-color-scheme: dark) { .logo-zwart { display: none; } .logo-wit { display: block; } }
.veld { display: grid; gap: var(--space-1); }
.veld label { font-size: 12px; line-height: 16px; font-weight: 700; }
input[type=text], input[type=password], input[type=search] {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px; }
input:focus { border-color: var(--ink); outline: none; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--ink);
  font: 700 12px/16px var(--sans); text-decoration: none; color: var(--ink); background: var(--paper); cursor: pointer; border-radius: 0; }
.knop.vol { background: var(--ink); color: var(--paper); }
.knop:hover { text-decoration: underline; }
.fout { color: var(--rose); font-weight: 700; font-size: 12px; min-height: 16px; }

/* Groepen: verzadigde kleuren die ook los van de kaartondergrond leesbaar zijn; klant blijft rose (het resultaat). */
.stip { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.stip.klant { background: var(--rose); }
.stip.kans { background: var(--g-kans); }
.stip.checken { background: var(--g-checken); }
.stip.standaard { background: var(--g-standaard); }
.stip.rustig, .stip.geen { background: var(--stip-rustig); }