@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --bg:            #f4f6f8;
  --bg-paneel:     #ffffff;
  --bg-verdiept:   #eef1f4;
  --bg-hover:      #e7ebef;

  --tekst:         #16202a;
  --tekst-zacht:   #5a6a78;
  --tekst-dim:     #8695a2;

  --rand:          #dde3e9;
  --rand-sterk:    #c3ccd6;

  --accent:        #0f6f8c;
  --accent-zacht:  #e2f0f5;
  --accent-tekst:  #ffffff;

  
  --merk:          #00A8E0;
  --merk-diep:     #06283a;

  --groen:         #1a7f4b;
  --groen-zacht:   #e3f3ea;
  --amber:         #9a6700;
  --amber-zacht:   #fdf3d9;

  
  --paars:         #6b3fa0;
  --paars-zacht:   #f2ebfb;
  --rood:          #b3261e;
  --rood-zacht:    #fbe6e4;

  
  --drukte-1:        #cdebd8;  --drukte-1-tekst: #14532d;
  --drukte-2:        #f7e08a;  --drukte-2-tekst: #5f4600;
  --drukte-3:        #f0a04b;  --drukte-3-tekst: #572600;
  --drukte-4:        #cf3b30;  --drukte-4-tekst: #ffffff;

  
  --wacht:         #e2620f;
  --wacht-tekst:   #ffffff;

  --r-klein:  6px;
  --r:        10px;
  --r-groot:  14px;

  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;

  --schaduw:      0 1px 2px rgba(16, 32, 42, .06), 0 1px 3px rgba(16, 32, 42, .04);
  --schaduw-op:   0 4px 12px rgba(16, 32, 42, .10);
  --focus:        0 0 0 3px var(--accent-zacht), 0 0 0 1px var(--accent);
}

body.dark {
  --bg:            #10151a;
  --bg-paneel:     #171e25;
  --bg-verdiept:   #1e262e;
  --bg-hover:      #253039;

  --tekst:         #e6ecf1;
  --tekst-zacht:   #9fb0bd;
  --tekst-dim:     #71828f;

  --rand:          #26313a;
  --rand-sterk:    #35434e;

  --accent:        #4fb3d1;
  --accent-zacht:  #12323d;
  --accent-tekst:  #08161b;

  --groen:         #4ec98a;
  --groen-zacht:   #10291d;
  --amber:         #e0b34a;
  --amber-zacht:   #2b2312;

  --paars:         #c4a2f0;
  --paars-zacht:   #2a1f3d;
  --rood:          #f08079;
  --rood-zacht:    #2e1614;
  --drukte-1:        #1b4a32;  --drukte-1-tekst: #a8e6c1;
  --drukte-2:        #7a610c;  --drukte-2-tekst: #ffeaa0;
  --drukte-3:        #9c4a0d;  --drukte-3-tekst: #ffe3c8;
  --drukte-4:        #bf4238;  --drukte-4-tekst: #ffffff;

  --wacht:         #ff8f43;
  --wacht-tekst:   #2a1204;

  --schaduw:      0 1px 2px rgba(0, 0, 0, .4);
  --schaduw-op:   0 4px 14px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
  
  body:not(.licht) {
    --bg:            #10151a;
    --bg-paneel:     #171e25;
    --bg-verdiept:   #1e262e;
    --bg-hover:      #253039;

    --tekst:         #e6ecf1;
    --tekst-zacht:   #9fb0bd;
    --tekst-dim:     #71828f;

    --rand:          #26313a;
    --rand-sterk:    #35434e;

    --accent:        #4fb3d1;
    --accent-zacht:  #12323d;
    --accent-tekst:  #08161b;

    --groen:         #4ec98a;
    --groen-zacht:   #10291d;
    --amber:         #e0b34a;
    --amber-zacht:   #2b2312;

    --paars:         #c4a2f0;
    --paars-zacht:   #2a1f3d;
    --rood:          #f08079;
    --rood-zacht:    #2e1614;
    --drukte-1:        #1b4a32;  --drukte-1-tekst: #a8e6c1;
    --drukte-2:        #7a610c;  --drukte-2-tekst: #ffeaa0;
    --drukte-3:        #9c4a0d;  --drukte-3-tekst: #ffe3c8;
    --drukte-4:        #bf4238;  --drukte-4-tekst: #ffffff;

    --wacht:         #ff8f43;
    --wacht-tekst:   #2a1204;

    --schaduw:      0 1px 2px rgba(0, 0, 0, .4);
    --schaduw-op:   0 4px 14px rgba(0, 0, 0, .5);
  }
}

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

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-klein); }

a { color: var(--accent); }

.merkteken { width: var(--maat); height: var(--maat); flex: none;
             display: inline-flex; align-items: center; justify-content: center;
             background: var(--merk); color: #fff;
             border-radius: calc(var(--maat) * .28); }
.merkteken svg { width: 55%; height: 55%; }

.omleidingsbalk { display: flex; align-items: center; gap: var(--ruimte-3);
                  padding: 9px var(--ruimte-4);
                  border-bottom: 1px solid transparent;
                  font-size: .875rem; font-weight: 500; }

.omleidingsbalk[data-soort="aan"] { background: var(--amber-zacht); color: var(--amber);
                                    border-bottom-color: var(--amber); }
.omleidingsbalk[data-soort="mis"] { background: var(--rood-zacht);  color: var(--rood);
                                    border-bottom-color: var(--rood); }

.omleidingsbalk-teken { flex: none; display: inline-flex; }
.omleidingsbalk-teken svg { width: 17px; height: 17px; }
.omleidingsbalk-tekst { flex: 1; min-width: 0; }
.omleidingsbalk-link { flex: none; color: inherit; font-weight: 600;
                       text-decoration: underline; text-underline-offset: 2px; }

main > .omleidingsbalk { margin: 0 0 var(--ruimte-4);
                         border: 1px solid var(--amber); border-radius: var(--r-klein); }