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

[data-theme="colorvariant-04"] {
  // swatches / primary
  --swatches-primary-600: #3D5854;
  --swatches-primary-500: #576C69;
  --swatches-primary-500-rgb: 87, 108, 105;
  --swatches-primary-500-o20: rgba(87, 108, 105,0.2); // #dde2e1
  --swatches-primary-400: #ABB5B4;
  --swatches-primary-300: #C4CCCA;
  --swatches-primary-200: #D5DAD9;
  --swatches-primary-100: #E6E9E9;
  --swatches-primary-100-o30: rgba(230,233,233,0.3); // #f7f8f8
  --swatches-primary-050: #EEF0F0;
  // swatches / secondary
  --swatches-secondary-700: #1F6A5E;
  --swatches-secondary-500: #298375;
  --swatches-secondary-500-o30: rgba(41,131,117,0.3); // #bedad5
  --swatches-secondary-300: #BFDAD6;
  --swatches-secondary-200: #D4E6E3;
  --swatches-secondary-100: #EAF3F1;
  // 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-500);
  // buttons / tertiary
  --buttons-tertiary-text: var(--swatches-primary-500);
  --buttons-tertiary-background: var(--swatches-primary-200);
  // text / default
  --text-default-standard: var(--swatches-primary-500);
  --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-secondary-300);
  --text-accent-on-solid: var(--swatches-secondary-100);
  // feedback
  --feedback-error: #D54048;
  --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-04"] .variant-base,
[data-theme="colorvariant-04"] .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-04"] .variant-subtle-primary,
[data-theme="colorvariant-04"] .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-04"] .variant-subtle-secondary,
[data-theme="colorvariant-04"] .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-04"] .variant-solid,
[data-theme="colorvariant-04"] .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-04"] .variant-accent,
[data-theme="colorvariant-04"] .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);
}
