/*css/globals/color_themes.scss*/
:root {
   --theme--background: #161b32;
   --theme--background-em: #22263c;
   --theme--primary_text: #fff;
   --theme--secondary_text: #b9bbc2;
   --theme--border: #737684;
   --theme--soft_color: rgba(255, 255, 255, 0.25);
   --theme--accent: #5450e0;
   --theme--accent-light: #72b0fe;
   --theme--accent_glow: rgba(84, 80, 224, 0.6);
   --theme--accent-text: #fff;
   --theme--accent-text-light: #161b32;
   --green: #02a576;
   --light-green: #6cde8e;
   --blue: #5450e0;
   --light-blue: #72b0fe;
   --purple: #7e2cbf;
   --light-purple: #b774f3;
   --red: #f63f5c;
   --light-red: #fa8d5a;
   --orange: #fa8d5a;
   --gold: #fea237;
   --light-gold: #f5c27f;
   --cyan: #3ce4fa;
   --light-cyan: #9ef4ff;
   --white: #fff;
   --navy: #161b32;
   --navy-grey-light: #b9bbc2;
   --navy-grey-mid: #737684;
   --brand--gradient-linear: linear-gradient(
     90deg,
     var(--gold) 0%,
     var(--red) 33%,
     var(--blue) 66%,
     var(--light-blue) 100%
   );
   --brand--gradient-conic: conic-gradient(
     from var(--_gradient_angle),
     var(--gold),
     var(--red),
     var(--blue),
     var(--red),
     var(--gold)
   );
   --theme--gradient-linear: linear-gradient(
     90deg,
     var(--theme--accent) 0%,
     var(--theme--accent-light) 33%
   );
   --theme--gradient-conic: conic-gradient(
     from var(--_gradient_angle),
     var(--theme--accent),
     var(--theme--accent-light),
     var(--theme--accent)
   );
}

[color-theme~=dark] {
   --theme--background: #161b32;
   --theme--background-em: #22263c;
   --theme--primary_text: #fff;
   --theme--secondary_text: #b9bbc2;
   --theme--border: #737684;
   --theme--soft_color: rgba(255, 255, 255, 0.25);
}

[color-theme~=light] {
   --theme--background: #fff;
   --theme--background-em: #f3f4f5;
   --theme--primary_text: #161b32;
   --theme--secondary_text: #5c5f70;
   --theme--border: #a2a4ad;
   --theme--soft_color: rgba($deep-navy, $alpha: 0.25);
}

[color-theme~=blue] {
   --theme--accent: #5450e0;
   --theme--accent-light: #72b0fe;
   --theme--accent_glow: rgba(84, 80, 224, 0.6);
   --theme--accent-text: #fff;
   --theme--accent-text-light: #161b32;
}

[color-theme~=green] {
   --theme--accent: #02a576;
   --theme--accent-light: #6cde8e;
   --theme--accent_glow: rgba(2, 165, 118, 0.6);
   --theme--accent-text: #fff;
   --theme--accent-text-light: #161b32;
}

[color-theme~=purple] {
   --theme--accent: #7e2cbf;
   --theme--accent-light: #b774f3;
   --theme--accent_glow: rgba(126, 44, 191, 0.6);
   --theme--accent-text: #fff;
   --theme--accent-text-light: #161b32;
}

[color-theme~=red] {
   --theme--accent: #f63f5c;
   --theme--accent-light: #fa8d5a;
   --theme--accent_glow: rgba(246, 63, 92, 0.6);
   --theme--accent-text: #fff;
   --theme--accent-text-light: #fff;
}

[color-theme~=gold] {
   --theme--accent: #fea237;
   --theme--accent-light: #f5c27f;
   --theme--accent_glow: rgba(254, 162, 55, 0.6);
   --theme--accent-text: #161b32;
   --theme--accent-text-light: #161b32;
}

[color-theme~=cyan] {
   --theme--accent: #3ce4fa;
   --theme--accent-light: #9ef4ff;
   --theme--accent_glow: rgba(60, 228, 250, 0.6);
   --theme--accent-text: #161b32;
   --theme--accent-text-light: #161b32;
}

.wf-design-mode .demo-padding-dark {
   background: rgba(255, 255, 255, 0.1);
   padding: 0.5rem;
}