/* Design tokens shared by every page (portal, checklist, administration).
   Load this first. Light theme only: the pages are not designed for dark mode. */
:root {
  color-scheme: light;

  /* Brand red: only for large marks (logo, bars). Text on it needs --accent. */
  --brand: #ed1c24;
  /* Buttons and fills with white text (5.2:1 on white). */
  --accent: #d71920;
  --accent-hover: #b81219;
  /* Red text and borders on light surfaces (6:1 on white). */
  --accent-ink: #c4121a;

  --ink: #171717;
  --muted: #6b6767; /* 5.1:1 on --paper */
  --line: #dedede;
  --line-strong: #bbbbbb;
  --paper: #f6f5f2;
  --surface: #ffffff;
  --surface-sunken: #f4f3f3;
  --chip: #ecebea;
  --head-bg: #111111;
  --head-fg: #ffffff;
  --head-muted: #a7a3a3;
  --head-line: #4a4848;
  --head-chip: #262525;
  --head-warn: #ff6b61; /* 6.8:1 on --head-bg */

  --ok: #1f7a43;
  --ok-bg: #edf7ee;
  --bad-bg: #fff0ef;
  --warn-bg: #ffdc77;

  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Arial Black", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 21px;
  --text-2xl: 25px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius: 3px;
  --page-width: 1440px;
  --page-gutter: 28px;
  --focus-ring: 2px solid var(--accent-ink);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-dialog: 0 15px 80px rgb(0 0 0 / 30%);
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 16px;
  }
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}