@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');



:root {

  --border-radius-s: 12px;

}


:root {

  --bg-body: #f4f4f4;
  --color-bg-dark-1: rgb(51, 63, 80);
  --color-bg-light-1: rgb(255, 255, 255);
  --text: #111111;
  --text-diap: #ffffff;
  --surface-dark-1:   rgb(51, 63, 80);
  --surface-dark-2:   rgb(70, 85, 107); /* iets lichter dan 1 (bijvoorbeeld: hover) */
  --surface-light-1:  rgb(255, 255, 255);
  --surface-light-2:  rgb(235, 235, 235); /* iets donker dan 1 */
  --border-dark: rgb(51, 63, 80);
  --border-dark-10: rgba(51, 63, 80, 0.1);
  --border-dark-20: rgba(51, 63, 80, 0.2);
  --accent: rgb(254, 113, 32);
  --box-shadow: 0px 2px 4px rgba(0,0,0,.05);
}

[data-theme="dark"] {

  --bg-body: rgb(35, 44, 56);
  --color-bg-dark-1: rgb(51, 63, 80);
  --color-bg-light-1: rgb(255, 255, 255);
  --text: #fff;
  --text-diap: #111;
  --surface-dark-1:  rgb(255, 255, 255);
  --surface-dark-2:  rgb(235, 235, 235); /* iets donker dan 1 */
  --surface-light-1:   rgb(51, 63, 80);
  --surface-light-2:   rgb(70, 85, 107); /* iets lichter dan 1 (bijvoorbeeld: hover) */
  --border: rgb(255, 255, 255);
  --border-dark-10: rgba(255, 255, 255, 0.1);
  --border-dark-20: rgba(255, 255, 255, 0.2);
  --accent: rgb(254, 113, 32); /* oranje */
  --box-shadow: 0 4px 16px rgba(0,0,0,.1);

}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Zorgt dat padding de breedte niet beïnvloedt */
}

body {
  background: var(--bg-body);
  color: var(--text);
  padding: 0px;
  margin: 0px;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size:17px;
  line-height:24px;
}

/* OpptLab */
p, li, code, span, div
 { color: var(--text); }



.material-symbols-outlined {
  font-variation-settings:
    'FILL' 1,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;
}





.opptylab-spacer { width:100%; height:2rem; }

.opptylab-hr { margin:1rem 0; }





.code div {display:inline-block; width:50px; font-size:0.8rem;}







/* ----- RESET & BASE ----- */



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box; /* Zorgt dat padding de breedte niet beïnvloedt */

}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}










/* ------------------- */
/* ------CONFIG------- */
/* ------------------- */







.opptylab-component-tabs-unique-name .opptylab-tab:nth-child(2) {
  /* We dwingen hier de kleur af, ongeacht dark of light mode */
  /* --surface-dark-1: red; */
}
/* Alleen als de pagina op dark mode staat én het element de class uitzondering heeft */
[data-theme="dark"] .opptylab-component-tabs-unique-name .opptylab-tab:nth-child(2) {
  /* --surface-dark-1: yellow; */
}