/* Gegenereerd uit tools/tokens.py. Niet met de hand bewerken.
 * Primitieven zijn feiten, semantische tokens zijn besluiten.
 * Componenten gebruiken --color-*; --gb-* alleen waar site.css de
 * reden erbij zet. */

:root {
  --gb-rood: #FA0000;
  --gb-geel: #FFE908;
  --gb-geel2: #FFD000;
  --gb-groen: #5BAA01;
  --gb-dgroen: #123815;
  --gb-inkt: #2A2A2A;
  --gb-wit: #FFFFFF;
  --gb-room: #FFFBE6;
  --gb-rooddiep: #C40000;
  --gb-muted: #6A6A6A;
  --gb-mutedopdonker: #BDC4AB;
  --gb-line: #DEE3DE;
  --gb-dgroenraised: #274A2A;
  --gb-dgroenlaag: #0C240E;
  --gb-geellicht: #FFED34;
  --gb-geelsoft: #FFF7B5;
  --color-feedback-success-fg: #0B6B3A;
  --color-feedback-success-bg: #E7F6EE;
  --color-feedback-warning-fg: #8A5A00;
  --color-feedback-warning-bg: #FDF3E2;
  --color-feedback-danger-fg: #A3231B;
  --color-feedback-danger-bg: #FBEAE8;
  --color-feedback-info-fg: #1F5FA8;
  --color-feedback-info-bg: #E8F1FB;
}

[data-brand="graasboerriek"] {
  --color-surface: #FFFBE6;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #FFF7B5;
  --color-text: #2A2A2A;
  --color-text-muted: #6A6A6A;
  --color-text-accent: #C40000;
  --color-border: #DEE3DE;
  --color-border-strong: #6A6A6A;
  --color-action-bg: #FFE908;
  --color-action-fg: #123815;
  --color-action-bg-hover: #FFD000;
  --color-action-fg-hover: #123815;
  --color-action-quiet-bg: #FFFFFF;
  --color-action-quiet-fg: #123815;
  --color-focus-ring: #C40000;
  --color-graphic-accent: #FA0000;
}

[data-brand="graasboerriek"][data-theme="dark"] {
  --color-surface: #123815;
  --color-surface-raised: #274A2A;
  --color-surface-sunken: #0C240E;
  --color-text: #FFFBE6;
  --color-text-muted: #BDC4AB;
  --color-text-accent: #FFED34;
  --color-border: #3D5C3F;
  --color-border-strong: #7D927E;
  --color-action-bg: #FFE908;
  --color-action-fg: #123815;
  --color-action-bg-hover: #FFD000;
  --color-action-fg-hover: #123815;
  --color-action-quiet-bg: #274A2A;
  --color-action-quiet-fg: #FFFBE6;
  --color-focus-ring: #FFE908;
  --color-graphic-accent: #FFE908;
  --color-feedback-success-fg: #4ADE80;
  --color-feedback-success-bg: #0B2B1C;
  --color-feedback-warning-fg: #FBBF24;
  --color-feedback-warning-bg: #2E2206;
  --color-feedback-danger-fg: #FCA5A5;
  --color-feedback-danger-bg: #2E1512;
  --color-feedback-info-fg: #7DD3FC;
  --color-feedback-info-bg: #0C1F33;
  color-scheme: dark;
}

/* Componentcontracten. Elk interactief element heeft de volle reeks
 * toestanden: rust, hover, actief, uitgeschakeld, focus, fout.
 * Ze verwijzen naar de semantische laag, nooit naar een merkkleur. */
:root {
  --button-primary-bg: var(--color-action-bg);
  --button-primary-fg: var(--color-action-fg);
  --button-primary-bg-hover: var(--color-action-bg-hover);
  --button-primary-fg-hover: var(--color-action-fg-hover);
  --button-primary-bg-active: var(--color-action-bg-hover);
  --button-primary-bg-disabled: var(--color-border);
  --button-primary-fg-disabled: var(--color-text-muted);
  --button-primary-ring: var(--color-focus-ring);
  --button-quiet-bg: var(--color-action-quiet-bg);
  --button-quiet-fg: var(--color-action-quiet-fg);
  --button-quiet-bg-hover: var(--color-surface-sunken);
  --button-quiet-border: var(--color-border-strong);
  --button-quiet-bg-disabled: var(--color-surface-raised);
  --button-quiet-fg-disabled: var(--color-text-muted);
  --button-quiet-ring: var(--color-focus-ring);
  --input-bg: var(--color-surface-raised);
  --input-fg: var(--color-text);
  --input-border: var(--color-border-strong);
  --input-border-hover: var(--color-text-muted);
  --input-border-error: var(--color-feedback-danger-fg);
  --input-placeholder: var(--color-text-muted);
  --input-bg-disabled: var(--color-surface-sunken);
  --input-ring: var(--color-focus-ring);
  --card-bg: var(--color-surface-raised);
  --card-border: var(--color-border);
  --card-shadow: var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);
}

/* Focus, overal hetzelfde. De witruimte is nodig omdat een ring in de
 * merkkleur op een knop van diezelfde kleur onzichtbaar is. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
}

/* Typografie. Een waarde per stap, niet een bereik. */
:root {
  --font-family: Lato, 'Helvetica Neue', Arial, sans-serif;
  --font-family-kop: 'Baloo 2', 'Trebuchet MS', Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text-display-size: 4.0000rem;
  --text-display-line: 1.000;
  --text-display-weight: 800;
  --text-display-tracking: -0.015em;
  --text-h1-size: 3.0000rem;
  --text-h1-line: 1.042;
  --text-h1-weight: 800;
  --text-h1-tracking: -0.01em;
  --text-h2-size: 2.1250rem;
  --text-h2-line: 1.118;
  --text-h2-weight: 800;
  --text-h2-tracking: -0.01em;
  --text-h3-size: 1.5000rem;
  --text-h3-line: 1.250;
  --text-h3-weight: 700;
  --text-h4-size: 1.1875rem;
  --text-h4-line: 1.368;
  --text-h4-weight: 700;
  --text-body-lg-size: 1.1875rem;
  --text-body-lg-line: 1.579;
  --text-body-lg-weight: 400;
  --text-body-size: 1.0625rem;
  --text-body-line: 1.588;
  --text-body-weight: 400;
  --text-body-sm-size: 0.9375rem;
  --text-body-sm-line: 1.467;
  --text-body-sm-weight: 400;
  --text-caption-size: 0.8125rem;
  --text-caption-line: 1.385;
  --text-caption-weight: 400;
  --text-overline-size: 0.8125rem;
  --text-overline-line: 1.385;
  --text-overline-weight: 700;
  --text-overline-tracking: 0.10em;
}

/* Maatvoering. Een schaal van 4 px. Kleine radii: de vormen van het
 * wapen zijn rond, de vlakken van de site zijn recht met een
 * accentlijn, zoals het aftelblok van het programmablok. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgb(18 56 21 / .10), 0 12px 26px -16px rgb(18 56 21 / .55);
  --shadow-2: 0 2px 4px rgb(18 56 21 / .12), 0 20px 36px -18px rgb(18 56 21 / .60);
  --shadow-3: 0 2px 0 rgb(18 56 21 / .25), 0 22px 40px -24px rgb(18 56 21 / .90);
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Beweging. Twee duren en een curve, meer niet. Beweging beantwoordt
 * een handeling van de bezoeker en kondigt nooit het ontwerp aan. */
:root {
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-ease: cubic-bezier(.23, 1, .32, 1);
}