:root {
  --brand-ink: #0b111d;
  --brand-ink-soft: #172131;
  --brand-paper: #f4f5f1;
  --brand-surface: #ffffff;
  --brand-surface-soft: #f8f9f6;
  --brand-line: rgb(11 17 29 / 12%);
  --brand-line-strong: rgb(11 17 29 / 20%);
  --brand-muted: #667085;
  --brand-accent: #ff6b5f;
  --brand-on-accent: var(--brand-ink);
  --brand-focus: #a8d8ff;
}

@supports (color: contrast-color(red)) {
  :root {
    --brand-on-accent: contrast-color(var(--brand-accent));
  }
}