/* Brand accents are separate from surfaces, typography and semantic colours. */
:root {
    --brand-primary: #6d068f;
    --brand-hover: #580574;
    --brand-soft: #f4edf7;
    --brand-focus: rgba(109, 6, 143, .12);
    --ui-surface: #fafaf8;
    --ui-surface-muted: #f1f3f2;
    --ui-ink: #202b33;
    --ui-muted: #626e77;
    --ui-line: #e1e6e7;
    --ui-dark: #1e2b33;
    --ui-on-dark: #c8d2d7;
    --ui-teal: #39786c;
    --ui-teal-soft: #e8f2ed;
    --ui-teal-light: #b9d8ce;
    --ui-amber: #b68a44;
    --ui-amber-soft: #f7efdf;
}