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

:root {
  --cgm-navy: #0C1F4E;
  --cgm-navy2: #081540;
  --cgm-oranje: #F07820;
  --cgm-oranje2: #D96510;
  --cgm-blauw: #1E7BC4;
  --cgm-goud: #8A7040;
  --cgm-soft: #F4F7FB;
  --cgm-ink: #1A2A3A;
  --cgm-muted: #586985;
  --cgm-blauwtekst: #1C72B8;
  --cgm-blauwlicht: #6DA9D9;
  --cgm-oranjesoft: #FCE7D7;
  --cgm-blauwsoft: #E2EEF7;
  --cgm-line: #E2E4EA;
  --cgm-navyraised: #243560;
  --cgm-tekstopdonker: #BAC1D0;
  --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="cgm"] {
  --color-surface: #FFFFFF;
  --color-surface-raised: #F4F7FB;
  --color-surface-sunken: #F4F7FB;
  --color-text: #1A2A3A;
  --color-text-muted: #586985;
  --color-text-accent: #1C72B8;
  --color-border: #E2E4EA;
  --color-border-strong: #586985;
  --color-action-bg: #0C1F4E;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #1C72B8;
  --color-action-fg-hover: #FFFFFF;
  --color-action-quiet-bg: #F4F7FB;
  --color-action-quiet-fg: #0C1F4E;
  --color-focus-ring: #0C1F4E;
  --color-graphic-accent: #D96510;
}

[data-brand="cgm"][data-theme="dark"] {
  --color-surface: #0C1F4E;
  --color-surface-raised: #243560;
  --color-surface-sunken: #081540;
  --color-text: #F4F7FB;
  --color-text-muted: #BAC1D0;
  --color-text-accent: #6DA9D9;
  --color-border: #2A3B63;
  --color-border-strong: #7D8BAA;
  --color-action-bg: #1C72B8;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #6DA9D9;
  --color-action-fg-hover: #0C1F4E;
  --color-action-quiet-bg: #243560;
  --color-action-quiet-fg: #F4F7FB;
  --color-focus-ring: #F07820;
  --color-graphic-accent: #F07820;
  --color-feedback-success-fg: #4ADE80;
  --color-feedback-success-bg: #0B2B1C;
  --color-feedback-warning-fg: #FBBF24;
  --color-feedback-warning-bg: #2E2206;
  --color-feedback-danger-fg: #F87171;
  --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-raised);
  --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);
  --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-raised);
  --input-ring: var(--color-focus-ring);
  --card-bg: var(--color-surface);
  --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: Barlow, 'Segoe UI', Arial, sans-serif;
  --font-family-kop: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text-display-size: 5.5000rem;
  --text-display-line: 0.955;
  --text-display-weight: 700;
  --text-display-tracking: -0.01em;
  --text-h1-size: 3.7500rem;
  --text-h1-line: 1.000;
  --text-h1-weight: 700;
  --text-h1-tracking: -0.01em;
  --text-h2-size: 2.6250rem;
  --text-h2-line: 1.048;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.005em;
  --text-h3-size: 1.7500rem;
  --text-h3-line: 1.143;
  --text-h3-weight: 600;
  --text-h4-size: 1.3750rem;
  --text-h4-line: 1.182;
  --text-h4-weight: 600;
  --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.7500rem;
  --text-overline-line: 1.333;
  --text-overline-weight: 600;
  --text-overline-tracking: 0.04em;
}

/* Maatvoering. Een schaal van 4 px. Twee radii: klein voor velden en
 * knoppen, groot voor de panelen en het beeld. Niet meer, want elke extra
 * radius is een tweede taal. */
: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: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgb(12 31 78 / .06);
  --shadow-2: 0 4px 12px rgb(12 31 78 / .10);
  --shadow-3: 0 12px 32px rgb(12 31 78 / .14);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* 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);
}