@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --navy: #0B1F4D;
  --blue: #0A5FB8;
  --blue-dark: #08478A;
  --blue-soft: #E6F0FB;
  --ground: #F4F7FB;
  --paper: #FFFFFF;
  --ink-muted: #3D4C66;
  --line: #DCE3EE;
  --line-strong: #9FB0C9;
  --ok-bg: #E7F5EE;
  --ok-line: #B5DEC8;
  --ok-ink: #0F4F31;
  --warn-bg: #FFF1D6;
  --warn-line: #F0CF8E;
  --warn-ink: #7A4B00;
  --danger: #B3262E;

  /* Lumify blue ordinal ramp, one hue, even lightness steps. Validated with the dataviz
     validator (light mode, white surface): monotone L, gaps >= 0.06, light end 2.15:1. */
  --lvl-level-1: #98B3D7;
  --lvl-level-2: #6892C7;
  --lvl-level-3: #376FB6;
  --lvl-level-4: #0052AA;

  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.45;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:focus-visible {
  outline: 3px solid #3D9BFF;
  outline-offset: 2px;
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
}

.qr-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--line-strong);
  color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}