:host, :root {
  --color-background-primary-default: #2a5188ff;
  --color-background-primary-hover: #12396dff;
  --color-background-primary-pressed: #032a5eff;
  --color-background-primary-fade: #ddedffff;
  --color-background-primary-fade-hover: #c6ddfdff;
  --color-background-accent-default: #f0c22eff;
  --color-background-accent-hover: #b68e00ff;
  --color-background-accent-pressed: #927100ff;
  --color-background-accent-fade: #faeac1ff;
  --color-background-secondary-default: #7ac7f3ff;
  --color-background-secondary-hover: #4795beff;
  --color-background-secondary-pressed: #2778a0ff;
  --color-background-secondary-fade: #d6f0ffff;
  --color-content-primary-default: #2a5188ff;
  --color-content-primary-hover: #12396dff;
  --color-content-primary-pressed: #032a5eff;
  --color-content-secondary-default: #2c7ca5ff;
  --color-content-secondary-hover: #005b82ff;
  --color-content-secondary-pressed: #00486dff;
  --color-content-accent-default: #917000ff;
  --color-content-accent-hover: #6c5100ff;
  --color-content-accent-pressed: #573e00ff;
  --color-content-on-secondary: #000000ff;
  --color-content-on-accent: #000000ff;
  --color-border-primary-default: #2a5188ff;
  --color-border-primary-hover: #12396dff;
  --color-border-primary-pressed: #032a5eff;
  --color-border-secondary-default: #4d9bc5ff;
  --color-border-secondary-hover: #1f739bff;
  --color-border-secondary-pressed: #005c83ff;
  --color-border-accent-default: #b58d00ff;
  --color-border-accent-hover: #876700ff;
  --color-border-accent-pressed: #6d5100ff;
  --font-family-title: "Grota Rounded", sans-serif;
  --font-family-body: "Rubik", sans-serif;
  --interaction-focus-border-color-default: #2a5188ff;
}