/* ================================================================
   GANZA · Design system v1 — gedeelde basis voor alle pagina's
   Wordt vóór de eigen stijlen van een pagina geladen; kleuren komen
   uit de tokens van de pagina zelf (--accent, --text, …).
   ================================================================ */

:root {
  /* Afrondingen — één schaal voor de hele app */
  --gz-r-xs: 4px;  --gz-r-sm: 8px;  --gz-r-md: 12px;
  --gz-r-lg: 16px; --gz-r-xl: 20px; --gz-r-2xl: 24px; --gz-r-pill: 999px;
  /* Beweging */
  --gz-ease: cubic-bezier(.2, .8, .2, 1);
  --gz-dur-fast: .15s; --gz-dur: .25s;
}

/* ── Typografie ─────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Cijfers even breed: bedragen, datums en tikkende klokken verspringen niet */
  font-variant-numeric: tabular-nums;
}
/* Lopende (serif) leestekst in Phoenix: gewone cijfers lezen prettiger */
.read-body, .lesson-quote, .rd-body, .jr-body, .l-passage, .urge-quote {
  font-variant-numeric: normal;
}
button, input, select, textarea { font-family: inherit; }

/* ── Selectie ───────────────────────────────────────────────── */
::selection { background: color-mix(in srgb, var(--accent, #5085a5) 24%, transparent); }

/* ── Toetsenbordfocus: altijd zichtbaar, nooit bij aanraken/klikken ── */
:where(a, button, summary, [role="button"], [role="switch"], [role="tab"], [role="link"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #5085a5) !important;
  outline-offset: 2px !important;
}
:where(input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #5085a5) 55%, transparent);
  outline-offset: 1px;
}

/* ── Minder beweging (systeeminstelling) ────────────────────── */
/* De ademcirkel blijft bewegen: die beweging ís de oefening. */
@media (prefers-reduced-motion: reduce) {
  *:not(.breath-circle), *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scrollbalken op desktop ────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 22%, transparent) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, currentColor 35%, transparent); }
}