/* tokens.css — VaaS-Zorg merkstandaard
   Laad dit als eerste stylesheet op elke pagina, voor nav.css en eigen <style>.
   Definieer GEEN eigen :root kleurtokens in pagina-specifieke CSS. */

:root {
  /* Light-only ontwerp: voorkom dat browser/OS in donkere modus de
     invoervelden omkeert (wit-op-wit tekst tijdens typen). */
  color-scheme: light;

  /* Primaire kleuren */
  --navy:        #1D3D59;
  --navy-80:     rgba(29,61,89,.8);
  --navy-50:     rgba(29,61,89,.5);
  --navy-10:     rgba(29,61,89,.1);
  --navy-05:     rgba(29,61,89,.05);

  /* Accentkleuren */
  --lime:        #73A605;
  --lime-dark:   #628E04;
  --lime-tint:   rgba(115,166,5,.12);
  --lime-600:    #5a8a04;
  --blue:        #2E7DB8;

  /* Neutrale kleuren */
  --silver:      #5A7080;
  --muted:       #5A6B7B;
  --hint:        #8A9DAA;
  --light:       #E8ECF0;
  --bg:          #F5F7FA;
  --white:       #FFFFFF;

  /* Feedback */
  --score-red:   #E24B4A;
  --score-orange:#EF9F27;
  --score-green: #73A605;

  /* Typografie */
  --font:        'Plus Jakarta Sans', system-ui, sans-serif;
  /* Getallen: monospace en tabular, zodat bedragen en ratio's onder elkaar
     werkelijk uitlijnen. Zelfde stack als de uitkomsttabellen al gebruiken. */
  --font-mono:   'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --lh-base:     1.6;

  /* Schaduwen */
  --shadow-sm:   0 1px 3px rgba(29,61,89,.06);
  --shadow-md:   0 4px 12px rgba(29,61,89,.08);
  --shadow-lg:   0 8px 24px rgba(29,61,89,.10);

  /* Border-radii */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-xs:   5px;
}

/* Basis body-reset */
body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--bg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* iOS Safari zet in zijn UA-stylesheet een eigen -webkit-text-fill-color op
   invoervelden, die de CSS `color` overschrijft — daardoor werd getypte tekst
   (o.a. het KvK-zoekveld op vastgoedprofiel) wit-op-wit weergegeven op iPhone,
   terwijl andere browsers de navy `color` correct toonden. Dwing de tekst­kleur
   gelijk aan de eigen `color` van het veld (currentColor), zodat velden met een
   donkere achtergrond en witte `color` óók goed blijven. Ook bij iOS-autofill. */
input, textarea, select { -webkit-text-fill-color: currentColor; }
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill { -webkit-text-fill-color: currentColor; }

/* Getallen in invoervelden — monospace, tabular, rechts uitgelijnd (harde
   standaard in CLAUDE.md, "Getallen en normen"). In de uitkomsttabellen was dit
   al gedaan; de invoervelden bleven achter, terwijl u juist dáár bedragen en
   ratio's onder elkaar zet en vergelijkt. Gemeten in de wizardtoets van
   21-aug-2026: alle twaalf modellen en tools renderden hun getalvelden nog in
   Plus Jakarta Sans met font-variant-numeric: normal.

   Bewust beperkt tot type=number: velden die getallen als tékst dragen
   (postcode, KvK-nummer) zijn geen rekengrootheden en horen bij de leesbare
   tekstregel.

   Het !important op font-family is een bewuste keuze, geen luiheid. De modellen
   zetten hun invoerfont via uiteenlopende containers (`.veld input`,
   `.regel-rij input`, `.org-zoek input`) en op de tarieftool zelfs via
   inline-stijl; die winnen allemaal van een gewone basisregel. Elke container
   apart benoemen wordt een lijst die bij het volgende model weer incompleet is.
   Omdat "alle getallen monospace" een hárde standaard is (CLAUDE.md, "Getallen
   en normen") en niet een voorkeur, hoort die regel te winnen. Een pagina die
   het écht anders moet, kan nog steeds met een eigen !important.

   tabular-nums en de rechtse uitlijning hebben het niet nodig: die erven geen
   van de paginaregels. */
input[type="number"] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Telefoon (sinds 26-sep-2026).
   1. iOS Safari zoomt de hele pagina in zodra u een veld aantikt met een letter
      kleiner dan 16px — en zoomt daarna niet terug. Op een telefoon krijgen
      invoervelden daarom 16px. Alleen op een aanraakscherm: op de desktop
      blijven de compacte tools compact.
   2. Liggend draaien mag de tekst niet opblazen.
   3. Een tabel die breder is dan het scherm schuift binnen zijn eigen kader
      (nav.js zet dat kader alleen om een tabel die werkelijk te breed is), in
      plaats van de hele pagina zijwaarts te laten schuiven. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) and (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }
}
.tabel-schuif { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabel-schuif > table { margin-top: 0; margin-bottom: 0; }