@font-face{font-family:"Noto Serif Display";src:url(/fonts/noto-serif-display-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/fonts/noto-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans";src:url(/fonts/noto-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(/fonts/noto-sans-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(/fonts/noto-sans-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Noto Naskh Arabic";src:url(/fonts/noto-naskh-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap}
/* Drempel — design tokens. Exact waarden uit de mockup. Gebruik alleen deze variabelen. */
:root {
  /* Oppervlakken */
  --dr-canvas: #F4F4F1;          /* achtergrond app + site */
  --dr-surface: #FFFFFF;         /* kaarten, chips, invoer */
  --dr-ink: #111317;             /* tekst, Snel weg-knop, donkere secties */
  --dr-ink-2: #5B606B;           /* secundaire tekst (6,1:1 op canvas) */
  --dr-ink-body: #3A3F48;        /* lopende tekst in lijsten */
  --dr-line: #D9D9D3;            /* randen van kaarten en knoppen */
  --dr-line-soft: #ECECE7;       /* scheidingslijnen binnen kaarten */
  --dr-line-section: #E4E4DE;    /* scheiding tussen sitesecties */

  /* Goud — merk Drempel */
  --dr-gold: #E2B04E;            /* primaire knop, voortgang, eigen chatbubbel */
  --dr-on-gold: #1A1405;         /* tekst op goud (9,4:1) */
  --dr-gold-deep: #8A5F0B;       /* kleine accenttekst en iconen op licht (5,1:1) */
  --dr-gold-mark: #C99A2E;       /* merkteken op licht, rand van geselecteerd */
  --dr-gold-tint: #FBF1DC;       /* achtergrond geselecteerd */
  --dr-gold-tint-line: #E8CF95;  /* rand van labels/tags */
  --dr-gold-on-tint: #4A3306;    /* tekst op geselecteerd */

  /* Signalen — altijd met woorden en icoon, nooit kleur alleen */
  --dr-danger: #B4352B;          /* 112-knop, rand bij acuut */
  --dr-danger-bg: #FCE9E6;
  --dr-danger-ink: #6E1E17;
  --dr-danger-ink-2: #8E2A22;    /* tekst Wis alles */
  --dr-danger-line: #E9B3AC;
  --dr-info: #2443B0;            /* Egyptisch blauw: afgeschermde gegevens */
  --dr-info-bg: #EEF1F8;
  --dr-info-ink: #2B3550;
  --dr-masked-bg: #E7EBF7;
  --dr-ok-bg: #EAF4EF;           /* contact gedeeld (dashboard) */
  --dr-ok-ink: #164F3C;
  --dr-ok-line: #B9DCCB;
  --dr-neutral-bg: #F1F1EC;
  --dr-neutral-line: #DEDED8;

  /* Donker (zijbalk dashboard, privacy-sectie site) */
  --dr-dark: #111317;
  --dr-dark-ink: #F1F1EC;
  --dr-dark-ink-2: #A3A9B3;
  --dr-dark-ink-3: #B4B9C2;
  --dr-dark-ink-4: #C9CDD4;
  --dr-dark-line: #2A2E36;

  /* Typografie */
  --dr-font-serif: 'Noto Serif Display', Georgia, serif;          /* koppen, weight 300 */
  --dr-font-sans: 'Noto Sans', system-ui, sans-serif;             /* alles overig, 400/500 */
  --dr-font-serif-ar: 'Noto Naskh Arabic', 'Noto Sans Arabic', serif;
  --dr-font-sans-ar: 'Noto Sans Arabic', 'Noto Sans', system-ui, sans-serif;
  --dr-tracking-head: -0.015em;  /* 0 in het Arabisch */

  /* Radius */
  --dr-r-tag: 8px;
  --dr-r-input: 12px;            /* chips, kleine knoppen, invoer */
  --dr-r-button: 14px;           /* primaire en secundaire knop, tegels */
  --dr-r-card: 16px;
  --dr-r-pill: 999px;

  /* Maten */
  --dr-touch: 44px;              /* minimum tikdoel */
  --dr-btn-primary-h: 58px;
  --dr-btn-secondary-h: 54px;
  --dr-tile-h: 84px;
  --dr-app-pad: 24px;            /* zijmarge schermen app */
  --dr-site-max: 1280px;
  --dr-site-pad: 40px;           /* 20px onder 680px */
  --dr-section-py: 110px;        /* 64px onder 680px */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--dr-canvas);color:var(--dr-ink);font-family:var(--dr-font-sans);-webkit-font-smoothing:antialiased}
[dir=rtl] body,[dir=rtl]{font-family:var(--dr-font-sans-ar)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--dr-info);outline-offset:2px}
.serif{font-family:var(--dr-font-serif);font-weight:300;letter-spacing:var(--dr-tracking-head)}
[dir=rtl] .serif{font-family:var(--dr-font-serif-ar);letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mark{width:30px;height:30px;flex-shrink:0}