:root{
  --ref-surface-dark: rgba(17,24,38,.64);
  --ref-surface-dark-strong: rgba(17,24,38,.78);
  --ref-surface-light: rgba(255,255,255,.88);
  --ref-surface-light-strong: rgba(255,255,255,.96);
  --ref-glow-blue: rgba(10,132,255,.18);
  --ref-glow-red: rgba(255,59,48,.12);
  --ref-border-dark: rgba(255,255,255,.10);
  --ref-border-light: rgba(15,23,42,.10);
  --ref-text-light: #0b1220;
  --ref-text-dark: #eaf0f7;
  --ref-muted-light: rgba(15,23,42,.68);
  --ref-muted-dark: rgba(234,240,247,.70);
  --ref-radius-xl: 12px;
  --ref-radius-lg: 12px;
  --ref-radius-control: 12px;
  --ref-shadow-soft: 0 18px 44px rgba(0,0,0,.22);
}

.nav,
.topbar,
.card,
.refChatBox,
.mobileMenu,
#mobileMenu{
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.brand,
.navlinks .pill,
.mobileMenu a,
.mobileBtn,
.refChip,
.tab,
.chip,
.badge{
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.navlinks .pill:hover,
.mobileMenu a:hover,
.mobileBtn:hover,
.refChip:hover,
.tab:hover,
.chip:hover,
.badge:hover{
  transform: translateY(-1px);
}

.nav,
.card,
#mobileMenu,
.mobileMenu,
.refChatBox{
  border-radius: 12px;
}

.refMetaTime{ letter-spacing:.02em; }
.refChatSub,
.refChatNote{ font-weight:800; }

html.theme-light .nav,
html.theme-light .card,
html.theme-light #mobileMenu,
html.theme-light .mobileMenu,
html.theme-light .refChatBox{
  background: var(--ref-surface-light);
  border-color: var(--ref-border-light);
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
}

html.theme-light .nav,
html.theme-light .card,
html.theme-light .refChatBox,
html.theme-light .mobileMenu,
html.theme-light #mobileMenu,
html.theme-light .pill,
html.theme-light .chip,
html.theme-light .tab,
html.theme-light .badge{
  color: var(--ref-text-light);
}

html.theme-light .sub,
html.theme-light .muted,
html.theme-light .k,
html.theme-light .refChatSub,
html.theme-light .refChatNote,
html.theme-light .refMetaTime{
  color: var(--ref-muted-light) !important;
}

html:not(.theme-light) .sub,
html:not(.theme-light) .muted,
html:not(.theme-light) .k,
html:not(.theme-light) .refChatSub,
html:not(.theme-light) .refChatNote,
html:not(.theme-light) .refMetaTime{
  color: var(--ref-muted-dark);
}

.refChatFab,
#btnTheme,
#btnThemeM,
#btnTheme_m,
#themeToggle,
#themeToggleM,
#btnTheme{
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}


.nav a.is-active,
.navlinks .pill.is-active,
.mobileMenu a.is-active{
  border-color: rgba(10,132,255,.40);
  background: rgba(10,132,255,.12);
  box-shadow: inset 0 0 0 1px rgba(10,132,255,.08);
}

html.theme-light .pill,
html.theme-light .mobileBtn,
html.theme-light .mobileMenu a,
html.theme-light .refChatFab{
  color: var(--ref-text-light);
}

.nav .brand.is-active,
.nav a.brand.is-active{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}


/* ===== Centrale radius laag =====
   Pas vooral deze variabelen aan als je overal dezelfde afronding wilt. */
:root{
  --ref-radius-surface: 12px;
  --ref-radius-control: 12px;
  --ref-radius-tight: 12px;
}

.nav,
.topbar,
.card,
.refChatBox,
.mobileMenu,
#mobileMenu{
  border-radius: 12px;
}

.brand,
.navlinks .pill,
.mobileMenu a,
.mobileBtn,
.refChip,
.tab,
.chip,
.badge,
.pill,
.hamburger,
.iconBtn,
button.pill,
a.pill{
  border-radius: 12px;
}