/* assets/tokens.css — shared by all five variants. Values are fixed by the spec.
   (KLAR/variante-4 and WEG/variante-5 load this file for the reset, the skip
   link and the spacing scale, but each carries its own palette in its own
   theme.css — they are the two variants using the exact logo greens, KLAR on
   pure white and WEG on a warm ground.) */
:root {
  --ink:        #23281F;
  --green-700:  #3F6A28;
  --green-600:  #507F34;
  --lime:       #90C048;   /* DECORATIVE ONLY — 2.03:1, never text */
  --petrol-700: #245F6E;
  --petrol-600: #2A6F7F;
  --muted:      #5E6659;
  --paper:      #FBF9F5;
  --sand:       #F2EDE4;
  --mist:       #EAF1EC;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px;
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }
a { color: var(--green-700); }
:focus-visible { outline: 3px solid var(--petrol-700); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* The skip link is the first tab stop on all 172 pages. Without this it stays
   clipped to 1x1 while focused, so pressing Tab does nothing a sighted
   keyboard user can see. Focused, it becomes a real, readable control anchored
   to the top-left. --paper on --green-600 measures 4.74:1 (WCAG AA), the same
   pairing the brand buttons use. */
.visually-hidden:focus,
.visually-hidden:focus-visible {
  position: fixed; top: var(--sp-2); left: var(--sp-2);
  width: auto; height: auto; overflow: visible; clip-path: none;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-4);
  background: var(--green-600); color: var(--paper);
  border-radius: var(--radius-sm); text-decoration: none;
  outline: 3px solid var(--petrol-700); outline-offset: 2px;
}
/* Wide content must scroll inside itself, never the page. */
.table-scroll { overflow-x: auto; }