/* Design tokens: every colour, font and shape of the tool. See docs/product/huisstijl.md and the frontend design, section 5. */

/*
 * Golos Text, self-hosted (SIL OFL). The file name is the one in the download from Google Fonts
 * (fonts.google.com/specimen/Golos+Text): put GolosText-VariableFont_wght.ttf in static/fonts/.
 * Until the file is there, the system font is used.
 */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/GolosText-VariableFont_wght.ttf") format("truetype");
}

:root {
  --color-ink: #102433;
  --color-ink-deep: #00293b;
  --color-primary: #ff4aa0;
  --color-primary-dark: #d24586;
  --color-primary-deep: #9b148d;
  --color-bg: #ffffff;
  --color-surface-cool: #f3f5f7;
  --color-surface-tint: #ffebf4;
  --color-border: #e5e7eb;
  --color-muted: #6b7280;
  --color-muted-strong: #5b6470;
  --color-error: #ef4444;

  /* On the dark header. */
  --color-on-dark: #ffffff;
  --color-on-dark-soft: rgb(255 255 255 / 0.88);
  --color-on-dark-faint: rgb(255 255 255 / 0.14);
  --color-on-dark-line: rgb(255 255 255 / 0.7);

  --font-family: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-card: 16px;
  --radius-button: 6px;
  --radius-pill: 9999px;
  --radius-header: 24px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1);

  --touch: 44px;
  --button-height: 56px;
  --column: 560px;
  --column-wide: 720px;
}