/*
  Tuindagboek, basis: reset, rootgrootte, body, veilige zones, typografie.
  Alleen tokens uit css/tokens.css; uitleg in docs/ontwerp.md.
*/

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

/* 17 px op Mac en elders; op iPhone volgt de root Dynamic Type. */
html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg);
  scroll-padding-top: calc(var(--safe-top) + var(--size-navbar));
}
@supports (font: -apple-system-body) {
  @media (pointer: coarse) {
    html { font: -apple-system-body; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
a { color: var(--color-accent); }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Koppen die alleen de focus krijgen om de schermlezer te verplaatsen. */
[tabindex="-1"]:focus-visible { outline: none; }

/* Alleen voor schermlezers. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Typografie (rollen uit de typeschaal). */
.tekst-display { font-family: var(--font-display); }
.cijfers { font-variant-numeric: tabular-nums; }

/* Schermen: marges plus veilige zones; ruimte onder voor de tabbalk. */
.schermen {
  display: block;
  padding:
    calc(var(--safe-top) + var(--space-2))
    calc(var(--safe-right) + var(--gutter))
    calc(var(--safe-bottom) + var(--size-tabbar) + var(--space-8))
    calc(var(--safe-left) + var(--gutter));
}
.zonder-tabbalk .schermen { padding-bottom: calc(var(--safe-bottom) + var(--space-8)); }
.scherm, .scherm-inhoud {
  max-width: var(--content-max);
  margin: 0 auto;
}

.noscript { padding: var(--space-8) var(--gutter); }