/* NH Dakwerken huisstijl: gedeelde tokens voor kaart en rapport */
:root {
  --nh-green: #88B828;
  --nh-green-light: #9ACC2C;
  --nh-green-dark: #6A9020;
  --nh-green-pale: rgba(136, 184, 40, 0.15);
  --nh-black: #0D0D0D;
  --nh-dark: #1A1A1A;
  --nh-gray: #404040;
  --nh-gray-light: #6B6B6B;   /* was #888888: te weinig contrast voor tekst (3,5:1); dit is 5,3:1 op wit */
  --nh-border: #E5E5E5;
  --nh-bg: #F0F0F0;
  --nh-bg-light: #F8F8F8;
  --nh-white: #FFFFFF;
  --nh-error: #DC3545;
  --nh-error-bg: #FEF2F2;
  --plat: #356F9F;          /* plat dak: koel blauw, onderscheidbaar van NH Groen; wit erop haalt 5,3:1 */
  --nh-on-green: #0D0D0D;   /* tekst op NH Groen: zwart haalt 8,3:1, wit maar 2,4:1 (WCAG AA vraagt 4,5:1) */
  --nh-green-tekst: #4D6B12; /* groene tekst op licht groen: 5,4:1 */
  --plat-pale: rgba(62, 124, 177, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  color: var(--nh-gray);
  background: var(--nh-bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { color: var(--nh-black); margin: 0; letter-spacing: -0.01em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--font);
  padding: 12px 18px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: var(--nh-green); color: var(--nh-on-green); text-decoration: none;
  transition: background var(--transition);
}
.btn:hover { background: var(--nh-green-dark); color: var(--nh-on-green); }
.btn:focus-visible { outline: 3px solid var(--nh-black); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-ghost { background: transparent; color: var(--nh-black); border: 1px solid var(--nh-border); }
.btn-ghost:hover { background: var(--nh-bg-light); }

.fout {
  background: var(--nh-error-bg); color: var(--nh-error);
  border: 1px solid rgba(220, 53, 69, .25); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; line-height: 1.45;
}

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  font: 700 12px/1 var(--font); color: var(--nh-on-green); background: var(--nh-green);
}
.badge.plat { background: var(--plat); color: var(--nh-white); }

.tag {
  display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600;
  background: var(--nh-green-pale); color: var(--nh-green-tekst);
}
.tag.plat { background: var(--plat-pale); color: #2B5B85; }
.tag.aanbouw, .tag.bijdak { background: #EDEDED; color: var(--nh-gray); }
.tag.dakkapel { background: #E8E3F3; color: #4B2E83; }