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

[data-theme="colorvariant-12"] {
  // swatches / primary
  --swatches-primary-600: #003836;
  --swatches-primary-500: #05625F;
  --swatches-primary-500-rgb: 5, 98, 95;
  --swatches-primary-500-o20: rgba(5, 98, 95,0.2); // #cde0df
  --swatches-primary-400: #356D6D;
  --swatches-primary-300: #648F8F;
  --swatches-primary-200: #96B3B3;
  --swatches-primary-100: #E6EDED;
  --swatches-primary-100-o30: rgba(230,237,237,0.3); // #f7fafa
  --swatches-primary-050: #F2F7F7;
  // swatches / secondary
  --swatches-secondary-700: #004D6D;
  --swatches-secondary-500: #077EAF;
  --swatches-secondary-500-o30: rgba(7,126,175,0.3); // #b4d8e7
  --swatches-secondary-300: #B5D8E7;
  --swatches-secondary-200: #CDE5EF;
  --swatches-secondary-100: #E6F2F7;
  // swatches / neutrals
  --swatches-neutrals-white: #FFF;
  --swatches-neutrals-white-o0: rgba(255,255,255,0); // transparent
  // gradient
  --gradient-a: var(--swatches-secondary-500);
  --gradient-b: var(--swatches-primary-500);
  // buttons / secondary
  --buttons-secondary-text: var(--swatches-neutrals-white);
  --buttons-secondary-background: var(--swatches-secondary-700);
  // 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-100);
  --text-accent-on-solid: var(--swatches-secondary-200);
  // 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-12"] .variant-base,
[data-theme="colorvariant-12"] .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-12"] .variant-subtle-primary,
[data-theme="colorvariant-12"] .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-12"] .variant-subtle-secondary,
[data-theme="colorvariant-12"] .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-12"] .variant-solid,
[data-theme="colorvariant-12"] .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-12"] .variant-accent,
[data-theme="colorvariant-12"] .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);
}
