// IMPORTANT: Change primary color in _svg-vars.scss!

[data-theme="colorvariant-13"] {
  // swatches / primary
  --swatches-primary-600: #6A0009;
  --swatches-primary-500: #AD000F;
  --swatches-primary-500-rgb: rgba(173, 0, 15);
  --swatches-primary-500-o20: rgba(173, 0, 15,0.2); // #efcccf
  --swatches-primary-400: #BE3440;
  --swatches-primary-300: #CD636C;
  --swatches-primary-200: #DC939A;
  --swatches-primary-100: #F7E6E7;
  --swatches-primary-100-o30: rgba(247,230,231,0.3); // #fdf7f8
  --swatches-primary-050: #FFF5F6;
  // swatches / secondary
  --swatches-secondary-700: #004D6D;
  --swatches-secondary-500: #005F86;
  --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7
  --swatches-secondary-300: #B5D8E7;
  --swatches-secondary-200: #CDE5EF;
  --swatches-secondary-100: #FEFFFF;
  // swatches / neutrals
  --swatches-neutrals-white: #FFF;
  --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
  // gradient
  --gradient-a: var(--swatches-primary-500);
  --gradient-b: var(--swatches-secondary-700);
  // buttons / secondary
  --buttons-secondary-text: var(--swatches-neutrals-white);
  --buttons-secondary-background: var(--swatches-secondary-500);
  // buttons / tertiary
  --buttons-tertiary-text: var(--swatches-primary-600);
  --buttons-tertiary-background: var(--swatches-primary-050);
  // text / default
  --text-default-standard: var(--swatches-primary-600);
  --text-default-on-accent: var(--swatches-neutrals-white);
  --text-default-on-solid: var(--swatches-neutrals-white);
  // text / accent
  --text-accent-default: var(--swatches-secondary-700);
  --text-accent-on-accent: var(--swatches-primary-050);
  --text-accent-on-solid: var(--swatches-secondary-100);
  // feedback
  --feedback-error: #AA2229;
  --feedback-error-light: #F7D9DA;
  --feedback-warning: #FDC600;
  --feedback-warning-light: #FFF4CC;

  //--text-accent-default-1-500: #4BA490;
  //--text-accent-default-1-100: #DBEDE9;
}

[data-theme="colorvariant-13"] .variant-base,
[data-theme="colorvariant-13"] .variant-base-hover:hover {
  --color-background: var(--swatches-neutrals-white);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-13"] .variant-subtle-primary,
[data-theme="colorvariant-13"] .variant-subtle-primary-hover:hover {
  --color-background: var(--swatches-primary-100);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--swatches-neutrals-white);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-13"] .variant-subtle-secondary,
[data-theme="colorvariant-13"] .variant-subtle-secondary-hover:hover {
  --color-background: var(--swatches-secondary-200);
  --color-text: var(--text-default-standard);
  --color-text-accent: var(--text-accent-default);
  --color-decoration: var(--swatches-secondary-500);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-secondary-500-o30);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--swatches-neutrals-white);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-13"] .variant-solid,
[data-theme="colorvariant-13"] .variant-solid-hover:hover {
  --color-background: var(--swatches-primary-500);
  --color-text: var(--swatches-neutrals-white);
  --color-text-accent: var(--text-accent-on-solid);
  --color-decoration: var(--color-text-accent);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-100-o30);
  --color-button-primary-background: var(--swatches-neutrals-white);
  --color-button-primary-text: var(--swatches-primary-500);
  --color-button-secondary-background: var(--buttons-secondary-background);
  --color-button-secondary-text: var(--buttons-secondary-text);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}

[data-theme="colorvariant-13"] .variant-accent,
[data-theme="colorvariant-13"] .variant-accent-hover:hover {
  --color-background: var(--swatches-secondary-500);
  --color-text: var(--text-default-on-accent);
  --color-text-accent: var(--text-accent-on-accent);
  --color-decoration: var(--color-text-accent);
  --color-border: var(--swatches-secondary-500);
  --color-surface-inset: var(--swatches-primary-500-o20);
  --color-button-primary-background: var(--swatches-primary-500);
  --color-button-primary-text: var(--swatches-neutrals-white);
  --color-button-secondary-background: var(--swatches-neutrals-white);
  --color-button-secondary-text: var(--text-accent-default);
  --color-button-tertiary-background: var(--buttons-tertiary-background);
  --color-button-tertiary-text: var(--buttons-tertiary-text);
  --color-button-ghost-background: var(--swatches-neutrals-white-o0);
  --color-button-ghost-text: var(--color-text);

  --color-text-microsite: var(--color-text);
  --color-text-microsite-secondary: var(--color-decoration);
}
