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

:root {
  --oz-magenta: #98214E;
  --oz-silhouet: #6A112E;
  --oz-wolk: #E986BB;
  --oz-wolk2: #E26CA6;
  --oz-geel: #FCCA49;
  --oz-inkt: #3A0919;
  --oz-silhouetraised: #792943;
  --oz-room: #FFF8E8;
  --oz-muted: #83646E;
  --oz-mutedopdonker: #DABEBA;
  --oz-line: #EDE2E6;
  --oz-rozesoft: #F9DDEC;
  --oz-geellicht: #FDD46A;
  --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="oszostere"] {
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFF8E8;
  --color-surface-sunken: #FFF8E8;
  --color-text: #3A0919;
  --color-text-muted: #83646E;
  --color-text-accent: #98214E;
  --color-border: #EDE2E6;
  --color-border-strong: #83646E;
  --color-action-bg: #98214E;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #6A112E;
  --color-action-fg-hover: #FFFFFF;
  --color-action-quiet-bg: #FFF8E8;
  --color-action-quiet-fg: #6A112E;
  --color-focus-ring: #6A112E;
  --color-graphic-accent: #98214E;
}

[data-brand="oszostere"][data-theme="dark"] {
  --color-surface: #6A112E;
  --color-surface-raised: #792943;
  --color-surface-sunken: #3A0919;
  --color-text: #FFF8E8;
  --color-text-muted: #DABEBA;
  --color-text-accent: #FDD46A;
  --color-border: #853C54;
  --color-border-strong: #AD7C8C;
  --color-action-bg: #FCCA49;
  --color-action-fg: #3A0919;
  --color-action-bg-hover: #FDD46A;
  --color-action-fg-hover: #3A0919;
  --color-action-quiet-bg: #792943;
  --color-action-quiet-fg: #FFF8E8;
  --color-focus-ring: #FCCA49;
  --color-graphic-accent: #FCCA49;
  --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-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: Inter, 'Segoe UI', 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.031;
  --text-display-weight: 600;
  --text-display-tracking: -0.025em;
  --text-h1-size: 2.7500rem;
  --text-h1-line: 1.091;
  --text-h1-weight: 600;
  --text-h1-tracking: -0.02em;
  --text-h2-size: 1.8750rem;
  --text-h2-line: 1.133;
  --text-h2-weight: 600;
  --text-h2-tracking: -0.015em;
  --text-h3-size: 1.3750rem;
  --text-h3-line: 1.273;
  --text-h3-weight: 600;
  --text-h3-tracking: -0.01em;
  --text-h4-size: 1.1250rem;
  --text-h4-line: 1.333;
  --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.06em;
}

/* Maatvoering. Een schaal van 4 px. Twee radii: klein voor knoppen,
 * groot voor het ene vlak dat rond mag zijn, zoals de sticker van het
 * logo. */
: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(58 9 25 / .06);
  --shadow-2: 0 4px 12px rgb(58 9 25 / .10);
  --shadow-3: 0 12px 32px rgb(58 9 25 / .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);
}