/* Kinnection, bouwstenen: de basis. Prompt 05, 20-09-2026.
   Wat elke pagina nodig heeft voor er één bouwsteen op staat: de nulstand, de letterrollen, de pagina-breedte,
   de focusrand en de ondergrond waarop iets ligt.

   De ondergrond. Een bouwsteen weet niet zelf of hij op licht of op indigo ligt. Hij leest de namen --op-...
   hieronder. Zet class="op-moment" op een indigo vlak en alles wat erin ligt kleurt mee.
   Ligt er in dat indigo vlak opnieuw een licht vlak, zet daar dan class="op-licht" op. Een .kaart doet dat vanzelf.
   De namen --op-... bevatten nooit een eigen kleur of maat: ze wijzen enkel naar tokens.css. */

/* Lettertypes zonder verspringen. Toegevoegd in prompt 09.
   Tot Poppins en Nunito Sans geladen zijn, toont de browser een letter van het toestel die even breed loopt.
   Zo breekt geen enkele regel anders zodra het echte lettertype er is. De percentages zijn gemeten op 21-09-2026: Poppins tegenover Arial vet, Nunito Sans tegenover Arial gewoon en vet. */
@font-face{font-family:"Poppins reserve";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica-Bold");font-weight:600 800;size-adjust:107%;ascent-override:98%;descent-override:33%;line-gap-override:9%}
@font-face{font-family:"Nunito Sans reserve";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica");font-weight:400;size-adjust:100%;ascent-override:101%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans reserve";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica-Bold");font-weight:700 800;size-adjust:97%;ascent-override:104%;descent-override:36%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:var(--type-body);color:var(--color-text);background:var(--color-ground)}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
strong{font-weight:var(--weight-heavy);color:var(--op-heading)}

:root,.op-licht,.op-moment .kaart,.terugblik{
  --op-text:var(--color-text);
  --op-text-muted:var(--color-text-muted);
  --op-label:var(--color-text-label);
  --op-heading:var(--color-heading);
  --op-border:var(--color-border);
  --op-rule:var(--color-rule);
  --op-focus:var(--color-focus);
  --op-tint:var(--color-tint);
  --op-placeholder:var(--color-placeholder);
  --op-card:var(--color-surface);
  --op-card-shadow:var(--shadow-card);
  --op-action:var(--color-moment);
  --op-action-text:var(--color-text-on-moment);
  --op-action-shadow:var(--shadow-control);
  --op-action-shadow-sm:var(--shadow-control-sm);
  --op-quiet:var(--color-surface);
  --op-quiet-text:var(--color-heading);
  --op-quiet-shadow:var(--shadow-control-quiet);
  --op-quiet-shadow-sm:var(--shadow-control-quiet-sm);
}
/* Op wit is een kaart crème, op crème is ze wit */
.op-wit{--op-card:var(--color-ground);background:var(--color-surface)}
.op-moment{
  --op-text:var(--color-text-on-moment);
  --op-text-muted:var(--color-text-on-moment-muted);
  --op-label:var(--color-text-on-moment-muted);
  --op-heading:var(--color-text-on-moment);
  --op-border:var(--color-border-on-moment);
  --op-rule:var(--color-rule-on-moment);
  --op-focus:var(--color-focus-on-moment);
  --op-tint:var(--color-rule-on-moment);
  --op-placeholder:var(--color-placeholder-on-moment);
  --op-card:var(--color-ground);
  --op-card-shadow:var(--shadow-card-on-moment);
  --op-action:var(--color-ground);
  --op-action-text:var(--color-heading);
  --op-action-shadow:var(--shadow-control-on-moment);
  --op-action-shadow-sm:var(--shadow-control-on-moment);
  --op-quiet:var(--color-moment);
  --op-quiet-text:var(--color-text-on-moment);
  --op-quiet-shadow:var(--shadow-control-on-moment);
  --op-quiet-shadow-sm:var(--shadow-control-on-moment);
  background:var(--color-moment);color:var(--op-text);
}
.op-licht{color:var(--op-text)}

/* Focus: altijd dezelfde rand, overal zichtbaar. .toestand-focus toont hem zonder toetsenbord, enkel voor de stijlgids */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,.toestand-focus{outline:var(--stroke-focus) solid var(--op-focus);outline-offset:var(--stroke-focus);border-radius:var(--radius-focus)}

/* Enkel voor schermlezers */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* De link "naar de inhoud": eerste ding op elke pagina, zichtbaar zodra het toetsenbord erop komt */
.spring{position:absolute;z-index:var(--layer-skip);left:var(--gap-tight);top:var(--gap-tight);display:inline-flex;align-items:center;min-height:var(--control-sm);padding-inline:var(--pad-control-sm);border-radius:var(--radius-control);background:var(--color-moment);color:var(--color-text-on-moment);font:var(--type-button-sm);text-decoration:none;transform:translateY(-200%)}
.spring:focus{transform:none}

/* De pagina-breedte: één maat voor alles, met links de strook van de lijn */
.binnen{position:relative;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-margin-start) var(--page-margin-end)}

/* De letterrollen */
.t-display{font:var(--type-display);letter-spacing:var(--tracking-display);color:var(--op-heading)}
.t-h1{font:var(--type-h1);letter-spacing:var(--tracking-heading);color:var(--op-heading)}
.t-number{font:var(--type-number);letter-spacing:var(--tracking-heading);color:var(--op-heading)}
.t-h2{font:var(--type-h2);letter-spacing:var(--tracking-heading);color:var(--op-heading)}
.t-h3{font:var(--type-h3);letter-spacing:var(--tracking-title);color:var(--op-heading)}
.t-title{font:var(--type-title);letter-spacing:var(--tracking-title);color:var(--op-heading)}
.t-lead{font:var(--type-lead)}
.t-body{font:var(--type-body)}
.t-small{font:var(--type-small);color:var(--op-text-muted)}
.t-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--op-label)}

/* Een icoon: getekend op een veld van 24, met lijnen, nooit gevuld */
.icoon{flex:none;width:var(--icon-md);height:var(--icon-md);fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.icoon-klein{width:var(--icon-sm);height:var(--icon-sm)}

/* Beweging uit wanneer de bezoeker dat vraagt. Geldt voor elke bouwsteen. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}