/* ================================================================
   base.css — typografie, body, links, utility-classes
   ================================================================ */

body {
  background: var(--cc-surface);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: var(--cc-text-body);
  letter-spacing: 0;
  overflow-x: hidden;
  cursor: none; /* vervangen door .cc-cursor */
}

body[data-mode="inverse"] {
  background: var(--cc-inverse-surface);
  color: var(--cc-inverse-primary);
}

/* Touch / coarse pointer: terug naar default cursor */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

/* ---- Display / wordmark / mark ---- */

.cc-wordmark {
  font-family: var(--cc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wordmark);
  font-feature-settings: "ss01", "kern";
  line-height: 1;
}
.cc-wordmark--sm { font-size: 18px; }
.cc-wordmark--xs { font-size: 14px; }

.cc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-primary);
  color: var(--cc-surface);
  font-family: var(--cc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-mark);
  line-height: 1;
  width: 32px; height: 32px;
  font-size: 18px;
  padding-bottom: 2px; /* optisch centreren */
}

.cc-mark--sm { width: 28px; height: 28px; font-size: 16px; }
.cc-mark--md { width: 48px; height: 48px; font-size: 28px; }
.cc-mark--lg { width: 80px; height: 80px; font-size: 48px; }
.cc-mark--xl { width: 120px; height: 120px; font-size: 72px; padding-bottom: 4px; }

/* Op Forest secties: CC mark wordt geïnverteerd */
[data-mode="inverse"] .cc-mark {
  background: var(--cc-surface);
  color: var(--cc-primary);
}

/* ---- Mono tags / FIG labels ---- */

.mono-tag {
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--cc-tracking-caps);
  text-transform: uppercase;
  color: var(--cc-text-muted);
  line-height: 1.4;
}
.mono-tag--subtle { color: var(--cc-text-subtle); }
[data-mode="inverse"] .mono-tag { color: var(--cc-text-on-dark-muted); }
[data-mode="inverse"] .mono-tag--subtle { color: var(--cc-text-on-dark-subtle); }
[data-mode="inverse"] .mono-tag--inverse { color: var(--cc-text-on-dark-muted); }

.fig-label {
  font-family: var(--cc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--cc-tracking-caps);
  color: var(--cc-text-on-dark-subtle);
  text-transform: uppercase;
}

/* ---- Headings ---- */

h1, h2, h3 {
  font-family: var(--cc-font-display);
  font-weight: 900;
  letter-spacing: var(--cc-tracking-wordmark);
}

/* ---- Links binnen body-copy ---- */

a {
  color: var(--cc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--cc-dur-fast) ease;
}
a:hover { color: var(--cc-primary); }
[data-mode="inverse"] a:hover { color: var(--cc-surface); }

/* Nav links / wordmark-links zonder underline */
.cc-nav a,
.cc-footer__nav a,
.cc-nav__brand,
.cta { text-decoration: none; }
.cc-nav a, .cc-footer__nav a { color: inherit; }

/* ---- Focus ---- */

:focus-visible {
  outline: 2px solid var(--cc-accent);
  outline-offset: 3px;
}

/* ---- Helpers ---- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}