:root,
html[data-mode="standard"] {
  --color-bg: #ffffff;
  --color-bg-sub: #f4f8e5;
  --color-text: #333333;
  --color-brand: #31988a;
  --color-primary: #257467;
  --color-primary-text: #ffffff;
  --color-border: #c8ae8b;
  --color-control-border: #6b5a45;
  --color-error: #b00020;
  --color-focus: #b35c00;
  --color-link-visited: #5d3b72;
}

html[data-mode="invert"] {
  --color-bg: #000000;
  --color-bg-sub: #1a1a1a;
  --color-text: #ffffff;
  --color-brand: #7fd9cb;
  --color-primary: #7fd9cb;
  --color-primary-text: #000000;
  --color-border: #888888;
  --color-control-border: #b3b3b3;
  --color-error: #ff8080;
  --color-focus: #ffd43d;
  --color-link-visited: #d7b8ff;
}

html[data-mode="yellow"] {
  --color-bg: #000000;
  --color-bg-sub: #1a1a1a;
  --color-text: #ffd43d;
  --color-brand: #ffd43d;
  --color-primary: #ffd43d;
  --color-primary-text: #000000;
  --color-border: #ffd43d;
  --color-control-border: #ffd43d;
  --color-error: #ff9999;
  --color-focus: #ffffff;
  --color-link-visited: #ffffff;
}

html[data-font="m"] { font-size: 100%; }
html[data-font="l"] { font-size: 125%; }
html[data-font="xl"] { font-size: 150%; }

:root {
  --font-size-small: 0.85rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --patient-card-padding: 1.25rem;
  --patient-card-content-gap: var(--space-2);
  --patient-block-gap: var(--space-4);
  --radius: 0.5rem;
  --content-width: 52rem;
}