@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('../fonts/AtkinsonHyperlegibleNext-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-font: 'Atkinson Hyperlegible Next', -apple-system, 'Segoe UI', sans-serif;

  --brand-primary: #25235e;
  --brand-primary-foreground: #ffffff;
  --brand-action: #3b3aa8;
  --brand-action-foreground: #ffffff;
  --brand-foreground: #1d1f2e;
  --brand-canvas: #ffffff;

  --brand-tint: #efeef9;
  --brand-mint: #e4e3f5;
  --brand-success: #0f7b5f;
  --brand-ring: var(--brand-action);
  --brand-destructive: #b3261e;

  --brand-hero: var(--brand-primary);
  --brand-hero-foreground: #ffffff;
  --brand-hero-pattern: url('../brand/whitelabel/guilloche.svg');

  --brand-glyph-width: auto;
  --brand-glyph-height: 54px;
  --brand-glyph-radius: 0;

  --brand-radius: 0.5rem;
}