/* Het Domijn ledenportaal: the token file. The client's look is THIS file; pages use only these names.
   Source: the live hetdomijn.nl, read 2026-10-15 (computed styles + pixel samples, home page only).
   Fonts: Oswald and Source Sans 3, both SIL Open Font License 1.1, self-hosted (fonts/, licence texts beside them).
   Aller Light (the live site's body face) is not used: no web licence shown for the cooperative (see DECISIONS.md).
   Contrast: numbers from derive_tokens.py (WCAG 2.x relative luminance). The live teal, orange and link blue FAIL AA as text
   on white, so they stay as fills and rules and the derived darker twins carry text and links. */

@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap;
  src: url("fonts/oswald-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/sourcesans3-latin.woff2") format("woff2");
}

:root {
  /* colour: live values, then the derived text twins (ratios on white / on the #F2F2F2 band) */
  --c-ink: #2D5567;            /* body text and headings: 8.06 / 7.20 */
  --c-teal: #6DB1BC;           /* fill only (header band, tags): 2.42 / 2.16 as text, so never text */
  --c-teal-text: #3B7780;      /* teal as text or a thin line that must be seen: 5.08 / 4.53 */
  --c-orange: #FF972E;         /* fill, rules, the active underline: 2.16 / 1.93 as text, so never text */
  --c-orange-text: #AD5700;    /* orange as text: 5.07 / 4.53 */
  --c-link: #1576A1;           /* links: 5.08 / 4.53 (the live site's #1B97CE is 3.30 / 2.95) */
  --c-link-visited: #5B4A8A;
  --c-teal-tint: #D4E9ED;      /* selected / hovered fills that carry text: ink on it is 6.4 */
  --c-bg: #FFFFFF;
  --c-band: #F2F2F2;
  --c-rule: #B9C8CE;           /* hairlines and card borders */
  --c-focus: #2D5567;          /* focus ring: 8.06 on white, 3.32 on the teal band */
  --c-danger: #A32020;

  /* type */
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;        /* 17 px: the live site sets 12-13 px, too small for a members portal */
  --fs-small: 0.9375rem;
  --fs-h1: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-h3: 1.1875rem;
  --fs-brand: clamp(2rem, 1.4rem + 2.6vw, 3rem);   /* the cooperative's name in the header */
  --fs-brand-sub: 1.5rem;      /* 'Ledenportaal' beside it */
  --fs-nav: 0.9375rem;         /* the menu */
  --fs-card-title: 1.25rem;    /* a member's name on a card */
  --fs-tag: 0.8125rem;         /* the small work-group labels */
  --fs-control: 0.9375rem;     /* filter buttons and other controls */
  --lh-body: 1.55;
  --measure: 66ch;             /* the reading width for handbook chapters */
  --track-caps: 0.05em;

  /* space (4 px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --page-max: 72rem;

  /* shape and line */
  --radius: 4px;
  --line: 1px;
  --line-double: 4px double var(--c-teal-text);   /* the live site's double hairline round section headings */
  --tap: 2.75rem;              /* 44 px targets (WCAG 2.5.8 asks 24 px; thumbs ask more) */

  /* motion: short, eased out, never the thing the page is for */
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  overflow-wrap: break-word;
}
h1, h2, h3, .caps {
  font-family: var(--font-head); font-weight: 400; text-transform: uppercase; letter-spacing: var(--track-caps);
  line-height: 1.2; margin: 0 0 var(--s-3);
}
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s-4); }
a { color: var(--c-link); text-underline-offset: 0.18em; }
a:visited { color: var(--c-link-visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 2px; }
img, svg { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }