/* Gegenereerd uit tools/tokens.py. Niet met de hand bewerken.
 * Primitieven zijn feiten, semantische tokens zijn besluiten.
 * Componenten gebruiken alleen --color-*, nooit --mm-* of --mt-*. */

:root {
  --mm-deep: #071B22;
  --mm-deep2: #0B2B34;
  --mm-petrol: #087D82;
  --mm-teal: #18B8B1;
  --mm-blue: #1479B8;
  --mm-ink: #152026;
  --mm-muted: #5F6D75;
  --mm-line: #DBE5E9;
  --mm-soft: #F3F7F8;
  --mm-tealsoft: #DFF6F4;
  --mt-navy: #071B33;
  --mt-navy2: #0A2947;
  --mt-blue: #0677D8;
  --mt-azure: #15A7FF;
  --mt-cyan: #1BD3FF;
  --mt-ink: #071B33;
  --mt-muted: #516174;
  --mt-line: #DCE7F1;
  --mt-soft: #F4F8FB;
  --mt-azuresoft: #DFF3FF;
  --shared-tundra: #C5B390;
  --shared-tundrasoft: #EEE6D7;
  --shared-graphite: #393A3A;
  --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="mikromedia"] {
  --color-surface: #FFFFFF;
  --color-surface-raised: #F3F7F8;
  --color-surface-sunken: #F3F7F8;
  --color-text: #071B22;
  --color-text-muted: #5F6D75;
  --color-text-accent: #087D82;
  --color-border: #DBE5E9;
  --color-border-strong: #5F6D75;
  --color-action-bg: #087D82;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #0B2B34;
  --color-action-quiet-bg: #F3F7F8;
  --color-action-quiet-fg: #071B22;
  --color-focus-ring: #071B22;
  --color-graphic-accent: #18B8B1;
}

[data-brand="mikromedia"][data-theme="dark"] {
  --color-surface: #071B22;
  --color-surface-raised: #0B2B34;
  --color-surface-sunken: #04121A;
  --color-text: #F3F7F8;
  --color-text-muted: #9BB0B8;
  --color-text-accent: #18B8B1;
  --color-border: #22333D;
  --color-border-strong: #5F7C8A;
  --color-action-bg: #087D82;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #18B8B1;
  --color-action-quiet-bg: #0B2B34;
  --color-action-quiet-fg: #F3F7F8;
  --color-focus-ring: #18B8B1;
  --color-graphic-accent: #18B8B1;
  --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;
}

[data-brand="mikrotools"] {
  --color-surface: #FFFFFF;
  --color-surface-raised: #F4F8FB;
  --color-surface-sunken: #F4F8FB;
  --color-text: #071B33;
  --color-text-muted: #516174;
  --color-text-accent: #0677D8;
  --color-border: #DCE7F1;
  --color-border-strong: #516174;
  --color-action-bg: #0677D8;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #0A2947;
  --color-action-quiet-bg: #F4F8FB;
  --color-action-quiet-fg: #071B33;
  --color-focus-ring: #071B33;
  --color-graphic-accent: #15A7FF;
}

[data-brand="mikrotools"][data-theme="dark"] {
  --color-surface: #071B33;
  --color-surface-raised: #0A2947;
  --color-surface-sunken: #04121A;
  --color-text: #F4F8FB;
  --color-text-muted: #9BB0B8;
  --color-text-accent: #15A7FF;
  --color-border: #22333D;
  --color-border-strong: #5F7C8A;
  --color-action-bg: #0677D8;
  --color-action-fg: #FFFFFF;
  --color-action-bg-hover: #15A7FF;
  --color-action-quiet-bg: #0A2947;
  --color-action-quiet-fg: #F4F8FB;
  --color-focus-ring: #15A7FF;
  --color-graphic-accent: #15A7FF;
  --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;
}

/* 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-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);
  --table-header-bg: var(--color-surface-raised);
  --table-header-fg: var(--color-text);
  --table-row-border: var(--color-border);
  --table-row-bg-hover: var(--color-surface-raised);
  --badge-bg: var(--color-surface-raised);
  --badge-fg: var(--color-text);
  --badge-border: var(--color-border);
}

/* 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, [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: 2.7500rem;
  --text-display-line: 1.091;
  --text-display-weight: 600;
  --text-display-tracking: -0.02em;
  --text-h1-size: 2.2500rem;
  --text-h1-line: 1.167;
  --text-h1-weight: 600;
  --text-h1-tracking: -0.015em;
  --text-h2-size: 1.7500rem;
  --text-h2-line: 1.214;
  --text-h2-weight: 600;
  --text-h2-tracking: -0.01em;
  --text-h3-size: 1.3750rem;
  --text-h3-line: 1.273;
  --text-h3-weight: 600;
  --text-h4-size: 1.1250rem;
  --text-h4-line: 1.333;
  --text-h4-weight: 600;
  --text-body-lg-size: 1.1250rem;
  --text-body-lg-line: 1.556;
  --text-body-lg-weight: 400;
  --text-body-size: 1.0000rem;
  --text-body-line: 1.625;
  --text-body-weight: 400;
  --text-body-sm-size: 0.8750rem;
  --text-body-sm-line: 1.571;
  --text-body-sm-weight: 400;
  --text-caption-size: 0.7500rem;
  --text-caption-line: 1.500;
  --text-caption-weight: 400;
  --text-overline-size: 0.6875rem;
  --text-overline-line: 1.455;
  --text-overline-weight: 600;
  --text-overline-tracking: 0.08em;
}

/* Maatvoering. Een schaal van 4 px; radii bewust klein, want het
 * handboek verbiedt de te ronde, speelse SaaS-stijl. */
: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: 4px;
  --radius-md: 8px;
  --radius-full: 999px;
  --shadow-1: 0 1px 2px rgb(7 27 34 / .06);
  --shadow-2: 0 4px 12px rgb(7 27 34 / .10);
  --shadow-3: 0 12px 32px rgb(7 27 34 / .14);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* Beweging. Twee duren en een curve, meer niet. Beweging mag een
 * handeling van de bezoeker beantwoorden en nooit het ontwerp
 * aankondigen: fast voor wat direct onder de vinger of de cursor
 * gebeurt, base voor wat ruimte inneemt zoals een uitklappend
 * antwoord. Alles erboven gaat traag voelen. De curve remt af en
 * versnelt niet, want een merk dat rust verkoopt hoort niet te
 * stuiteren. Wie hier iets aanzet, zet ook de reduced-motion-regel
 * in site.css aan. */
:root {
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(.2, .6, .2, 1);
}