:root {
  /* Colors */
  --color-primary-brand: #ffde16;

  --color-text: #33342e;

  --color-secondaryText: #657287;

  --color-error: #db0a5b;

  --color-background: #fff;

  --color-subtle-background: #f7f8fa;

  --color-success: #00ab4c;

  --color-link: #0078ab;

  /* Form options */

  --form-padding: 1.5rem;

  --border-radius: 4px;

  /* Border around entire form */

  --form-border: 1px solid #e6e9ed;

  /* Form header and footer areas */

  --form-header-footer-background: #fff;

  --form-header-footer-border-color: #e6e9ed;

  /* Advance button: continue, donate, etc. */

  --advance-button-background-color: var(--color-primary-brand);

  --advance-button-color: var(--color-text);

  --advance-button-border: 0;

  --advance-button-font-weight: bold;

  --advance-button-text-transform: none;

  --advance-button-font-size: 1rem;

  /* Selectable buttons: amounts, recurring, etc. */

  --select-button-color-text: var(color-text);

  --select-button-color-background: #e6e9ed;

  --select-button-border: 0;

  --select-button-font-weight: bold;

  --select-button-text-transform: none;

  --select-button-font-size: 1rem;

  --select-button-selected-color-text: var(--color-text);

  --select-button-selected-color-background: var(--color-primary-brand);

  --select-button-selected-border: 0;

  /* Input fields */

  --input-background-color: #fff;

  --input-border-size: 1px;

  --input-border-color: #657287;

  --input-border-focus-color: var(--color-primary-brand);

  --input-color: var(--color-text);

  --input-label-color: var(--color-primary-brand);

  --input-color-placeholders: #657287;
}