/* Lettertypen van RunSynergy, ná tokens.css (design-system 86ffb02).
   Het huispalet komt uit ds/tokens.css. Deze aliassen houden de bestaande
   pagina's op die kleuren. Archivo voor koppen, IBM Plex voor tekst en code. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Archivo", system-ui, sans-serif;
  --bg: var(--page);
  --surface2: var(--subtle);
  --text: var(--ink);
  --accent: var(--action);
  --on-accent: var(--on-action);
  --link: var(--action);
  --primary-bg: var(--action);
  --primary-text: var(--on-action);
  --ok: var(--status-ok);
  --warn: var(--warning);
  --danger: var(--error);
  --notice: var(--subtle);
  --chip-bg: var(--wash);
  --chip-text: var(--ink);
  --logo-bg: var(--mark-1);
  --logo-fg: var(--ink);
  --color-bg: var(--page);
  --color-surface: var(--surface);
  --color-surface-alt: var(--subtle);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-brand: var(--action);
  --color-on-brand: var(--on-action);
  --color-link: var(--action);
  --color-action: var(--action);
  --color-on-action: var(--on-action);
  --color-focus: var(--focus);
  --color-success: var(--status-ok);
  --color-warning: var(--warning);
  --color-danger: var(--error);
  --color-info-bg: var(--subtle);
  --radius-l: var(--radius);
}
:root[data-theme="stroom"],
:root[data-theme="hartslag"] {
  --muted: var(--secondary);
}