@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}

:root {
  --c-bg: #F4F2ED;
  --c-surface: #FFFFFF;
  --c-surface-sunk: #F8F7F3;
  --c-surface-hover: #FAF9F6;
  --c-nav-bg: #ECE9E2;
  --c-backdrop: rgba(13, 36, 63, 0.45);
  --c-line: #E0DCD3;
  --c-line-strong: #8E8A80;
  --c-line-ink: #0D243F;
  --c-text: #0D243F;
  --c-text-muted: #545D6B;
  --c-text-subtle: #636A76;
  --c-text-inverse: #FFFFFF;
  --c-accent: #1D66D6;
  --c-accent-hover: #1553B0;
  --c-accent-soft: #E7EFFC;
  --c-focus: #1D66D6;
  --c-draft: #4F5865;
  --c-draft-bg: #EEECE7;
  --c-draft-line: #C9C5BB;

  --c-open: #1E4F8A;
  --c-open-bg: #E9EFF7;
  --c-open-line: #B9CBE3;

  --c-paid: #2B6440;
  --c-paid-bg: #E8F1EA;
  --c-paid-line: #B7D2BF;

  --c-overdue: #A12A1D;
  --c-overdue-bg: #F9EAE7;
  --c-overdue-line: #E5B8B1;

  --c-cancelled: #5E6470;
  --c-cancelled-bg: #FFFFFF;
  --c-cancelled-line: #B5B1A8;

  --c-warning: #7A5200;
  --c-warning-bg: #FBF2DE;
  --c-warning-line: #E6CF98;

  --c-negative: #A12A1D;
  --font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-figure: 1.75rem;

  --lh-tight: 1.2;
  --lh-base: 1.5;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --nav-w: 13.5rem;
  --top-h: 3rem;
  --row-h: 2.375rem;
  --control-h: 2.25rem;
  --content-max: 82rem;

  --radius-sm: 2px;
  --radius: 3px;

  --border: 1px solid var(--c-line);
  --border-strong: 1px solid var(--c-line-strong);

  --focus-outline: 2px solid var(--c-focus);
  --focus-offset: 2px;
}