:root {
  --pv-ink: #1c1917;
  --pv-ink-2: #57534e;
  --pv-ink-3: #a8a29e;
  --pv-brand: #9f003e;
  --pv-brand-600: #ad0445;
  --pv-wash: #fff0f2;
  --pv-paper: #ffffff;
  --pv-field: #f7f6f5;
  --pv-rule: #e7e5e4;
  --pv-done: #15803d;
  --pv-done-wash: #f0fdf4;
  --pv-warn: #b45309;
  --pv-warn-wash: #fffbeb;
  --pv-warn-line: #fde68a;
  --pv-done-line: #bbf7d0;
  --pv-flow: #0369a1;
  --pv-flow-wash: #f0f9ff;
  --pv-flow-line: #bae6fd;
  --pv-stop: #b91c1c;
  --pv-stop-wash: #fef2f2;
  --pv-stop-line: #fecaca;
  --pv-brand-line: #f5c6d8;
  --pv-control-h: 2.125rem;
  --pv-control-px: 0.625rem;
  --pv-control-fs: 0.75rem;
  --pv-control-r: 0.5rem;
}

@media (min-width: 640px) and (pointer: fine) {
  :root {
    --pv-control-h: 1.875rem;
  }
}

.pv-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.pv-eyebrow {
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-ink-2);
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  border: 1px solid var(--pv-rule);
  border-radius: 0.3125rem;
  background: var(--pv-field);
  color: var(--pv-ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.pv-chip svg {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
}

.pv-chip-hold {
  background: var(--pv-field);
  border-color: var(--pv-rule);
  color: var(--pv-ink-2);
}

.pv-chip-wait {
  background: var(--pv-warn-wash);
  border-color: var(--pv-warn-line);
  color: var(--pv-warn);
}

.pv-note-warn {
  color: var(--pv-warn);
}

.pv-chip-flow {
  background: var(--pv-flow-wash);
  border-color: var(--pv-flow-line);
  color: var(--pv-flow);
}

.pv-chip-done {
  background: var(--pv-done-wash);
  border-color: var(--pv-done-line);
  color: var(--pv-done);
}

.pv-chip-stop {
  background: var(--pv-stop-wash);
  border-color: var(--pv-stop-line);
  color: var(--pv-stop);
}

.pv-chip-brand {
  background: var(--pv-wash);
  border-color: var(--pv-brand-line);
  color: var(--pv-brand);
}
