/* toeslagrecht — kleur, ruimte en pagina's. Direction A, het formulier: owner decision 2026-10-19.
   Every colour, size and spacing the site uses is a custom property here and nowhere else
   (site/DESIGN-amendment.md). Licence: MIT (LICENSE). */
:root {
  color-scheme: light;

  /* paper and ink */
  --paper: #FFFFFF;
  --paper-2: #F4F5F4;        /* citation blocks, quiet panels */
  --ink: #1A1A1A;
  --ink-2: #3D4441;          /* explanatory text */
  --muted: #5F6662;          /* notes, help text, footer */
  --rule: #D7DAD8;
  --rule-strong: #1A1A1A;

  /* one action colour, one error colour */
  --green: #1F5C45;          /* button, links, step numbers, the chosen option's border */
  --green-ink: #143D2E;      /* hover */
  --green-paper: #E6F0EB;    /* the chosen option's fill */
  --error: #A32019;          /* error text and the field's border in error, nothing else */
  --error-paper: #FBECEA;    /* reserved */
  --focus: #1A1A1A;          /* 3px outline, 2px offset, on everything focusable */

  /* type: interface sans, law serif, both self-hosted (site/fonts/) */
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --size-3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);   /* body: 18px phone, ~20px at 1280, 22px at 1920 */
  --size-1: calc(var(--size-3) * 2.1);                 /* the question, the amount; line-height 1.15 */
  --size-2: calc(var(--size-3) * 1.25);                /* field labels, section headings; 1.3 */
  --size-4: calc(var(--size-3) * 0.875);               /* margin notes, status, footer; never under 15px; 1.5 */
  --leading: 1.55;
  --leading-1: 1.15;
  --leading-2: 1.3;
  --leading-4: 1.5;

  --measure: 60ch;           /* form and result; a worried reader wants short lines */
  --page: 760px;             /* the one column */
  --page-wide: 1040px;       /* dossier index pages may use it */
  --gutter: 1.5rem;          /* 1rem under 400px */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem;
  --kop-ruimte: var(--s-3);  /* the space between the menu's hairline and the page title: the same as above a field; owner, 2026-10-20 */
  --radius: 4px;
  --target: 44px;            /* minimum height of anything tappable; WCAG 2.2 asks 24, the form gets 44 */
  --hairline: 1px;
  --border: 2px;
  --accent-bar: 4px;         /* the citation block's left border */
  --outline: 3px;
  --outline-offset: 2px;
  --underline-offset: 3px;
  --tracking-caps: 0.06em;   /* the status word */
  --icon: 1.1em;             /* the padlock */
  --input-max: 20rem;        /* the widest a number box needs to be */
  --pad-knop: 1.75rem;       /* the button's side padding (28px) */
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;   /* code in the dossier only */
}
@media (max-width: 400px) { :root { --gutter: 1rem; } }
