/* jb.tools: donker kleurschema op ACSS-tokens, afgeleide tokens, animaties en toestanden die alleen scripts zetten. */
html:root {
  color-scheme: dark;
  /* Thema-tokens; donker (standaard) volgt ACSS, licht staat hieronder */
  --jb-bg: var(--base-ultra-dark);
  --jb-plate: color-mix(in oklch, var(--base-ultra-dark) 85%, var(--base));
  --jb-plate-2: color-mix(in oklch, var(--base-ultra-dark) 65%, var(--base));
  --jb-line: var(--base);
  --jb-text: var(--text-light);
  --jb-muted: var(--text-light-muted);
  --jb-signal: var(--accent);
  --jb-action: var(--primary);
  --jb-ok: oklch(85% 0.11 162);
  --jb-star: oklch(84% 0.12 80);
  --jb-grid: .28;
  --jb-grid-line: color-mix(in srgb, var(--base) 30%, transparent);
  --jb-shadow: #000;
  /* altijd inkt, ook in licht (knop op de blauwe band) */
  --jb-ink: var(--base-ultra-dark);
  --jb-ink-2: color-mix(in oklch, var(--base-ultra-dark) 65%, var(--base));
  --jb-action-hover: color-mix(in oklch, var(--primary) 80%, var(--accent));
  --jb-radius: calc(var(--radius) * 2);
  --jb-radius-l: calc(var(--radius) * 3.2);
  --body-bg-color: var(--jb-bg);
  --text-color: var(--jb-muted);
  --heading-color: var(--jb-text);
  --link-color: var(--jb-signal);
  /* Knoppen: Archivo 700 */
  --btn-font-family: var(--heading-font-family);
  --btn-font-weight: 700;
  --btn-letter-spacing: .01em;
}

/* Licht: Papier, wit, Lijn, Inkt; Actie voor accenten (Signaal is te licht op papier) */
html:root[data-theme="light"] {
  color-scheme: light;
  --jb-bg: #F1F2F7;
  --jb-plate: #FFFFFF;
  --jb-plate-2: #E6E9F4;
  --jb-line: #D5D9EA;
  --jb-text: #05061A;
  --jb-muted: #4A5078;
  --jb-signal: #3657C4;
  --jb-ok: #17805A;
  --jb-star: #A86F00;
  --jb-grid: .9;
  --jb-grid-line: #D5D9EA;
  --jb-shadow: rgba(5, 6, 26, .18);
}

html:root {
  background-color: var(--jb-bg);
}

body {
  background-color: var(--jb-bg);
  color: var(--jb-muted);
}

[id] {
  scroll-margin-top: 84px;
}

@keyframes jb-tick { to { transform: translateX(-50%); } }
@keyframes jb-flow { to { stroke-dashoffset: -14; } }
@keyframes jb-rise { from { opacity: .4; transform: translateY(6px); } }

.board__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.board__line {
  fill: none;
  stroke: var(--jb-line);
  stroke-width: 1.5;
}

html:root[data-theme="light"] .board__line:not(.board__line--on) {
  stroke: #AEB5D3;
}

.board__line--on {
  stroke: var(--jb-signal);
  stroke-dasharray: 6 8;
  animation: jb-flow 1s linear infinite;
}

.board__node.board__node--on {
  color: var(--jb-text);
  background: var(--jb-plate-2);
  border-color: var(--jb-signal);
}

.board__node.board__node--on::before {
  background: var(--jb-signal);
  box-shadow: 0 0 10px var(--jb-signal);
}

.eco__mod.eco__mod--rel {
  border-color: color-mix(in srgb, var(--jb-signal) 55%, var(--jb-line));
}

.reveal.reveal--pre {
  opacity: .25;
  transform: translateY(18px);
}

.header__nav.header__nav--open {
  @media (max-width: 960px) {
    display: flex;
  }
}

/* naar boven: zichtbaar na 400 px (script) */
.to-top.to-top--show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
}

.to-top__track {
  fill: none;
  stroke: transparent;
}

.to-top__bar {
  fill: none;
  stroke: var(--jb-signal);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track,
  .board__line--on,
  .finder__answer-inner,
  .rev-cards {
    animation: none;
  }
  .to-top,
  .to-top__bar,
  .reveal,
  .board__node,
  .board__feed-item {
    transition: none;
  }
  .reveal.reveal--pre {
    opacity: 1;
    transform: none;
  }
}

/* logo's in licht */
html:root[data-theme="light"] img[src$="/jb-tools.svg"] { content: url("../assets/jb-tools-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-agenda.svg"] { content: url("../assets/jb-agenda-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-booking.svg"] { content: url("../assets/jb-booking-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-crm.svg"] { content: url("../assets/jb-crm-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-directory.svg"] { content: url("../assets/jb-directory-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-invoice.svg"] { content: url("../assets/jb-invoice-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-news.svg"] { content: url("../assets/jb-news-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-reviews.svg"] { content: url("../assets/jb-reviews-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-rewards.svg"] { content: url("../assets/jb-rewards-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-seo.svg"] { content: url("../assets/jb-seo-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-shop.svg"] { content: url("../assets/jb-shop-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-sign.svg"] { content: url("../assets/jb-sign-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-social.svg"] { content: url("../assets/jb-social-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-support.svg"] { content: url("../assets/jb-support-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-time.svg"] { content: url("../assets/jb-time-light.svg"); }
html:root[data-theme="light"] img[src$="/jb-web.svg"] { content: url("../assets/jb-web-light.svg"); }

.eco__detail-name {
  font-family: var(--heading-font-family);
  font-size: 1.625rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  color: var(--jb-text);
}

.receipt__empty {
  margin: 0;
  font-size: .9375rem;
  color: var(--jb-muted);
}

.help-empty {
  margin: 0;
  padding: 14px 0;
  color: var(--jb-muted);
}