:root[theme="anywhere-default-dark-violet"],
:root[data-theme="anywhere-default-dark-violet"] {
  --surface-a: #1e1e1e;
  --surface-b: #121212;
  --surface-c: rgba(255, 255, 255, 0.03);
  --surface-d: #383838;
  --surface-e: #1e1e1e;
  --surface-f: #1e1e1e;
  --text-color: rgba(255, 255, 255, 0.87);
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --primary-color: var(--primaryColor);
  --primary-color-text: #ffffff;
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --surface-0: #121212;
  --surface-50: #2a2a2a;
  --surface-100: #414141;
  --surface-200: #595959;
  --surface-300: #717171;
  --surface-400: #898989;
  --surface-500: #a0a0a0;
  --surface-600: #b8b8b8;
  --surface-700: #d0d0d0;
  --surface-800: #e7e7e7;
  --surface-900: #ffffff;
  --gray-50: #e7e7e7;
  --gray-100: #d0d0d0;
  --gray-200: #b8b8b8;
  --gray-300: #a0a0a0;
  --gray-400: #898989;
  --gray-500: #717171;
  --gray-600: #595959;
  --gray-700: #414141;
  --gray-800: #2a2a2a;
  --gray-900: #121212;
  --content-padding: 1rem;
  --inline-spacing: 0.5rem;
  --border-radius: 3px;
  --surface-ground: #121212;
  --surface-section: #121212;
  --surface-card: #1e1e1e;
  --surface-overlay: #1e1e1e;
  --surface-border: #383838;
  --surface-hover: rgba(255, 255, 255, 0.03);
  --maskbg: rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 1px #cf95d9;
  --highlight-bg: rgba(199, 90, 174, 0.16);
  --highlight-text-color: var(--primaryColor);
}

:root[theme="anywhere-default-dark-violet"],
:root[data-theme="anywhere-default-dark-violet"] {
  --blue-50: #f4fafe;
  --blue-100: #cae6fc;
  --blue-200: #a0d2fa;
  --blue-300: #75bef8;
  --blue-400: #4baaf5;
  --blue-500: #2196f3;
  --blue-600: #1c80cf;
  --blue-700: #1769aa;
  --blue-800: #125386;
  --blue-900: #0d3c61;
  --green-50: #f6fbf6;
  --green-100: #d4ecd5;
  --green-200: #b2ddb4;
  --green-300: #90cd93;
  --green-400: #6ebe71;
  --green-500: #4caf50;
  --green-600: #419544;
  --green-700: #357b38;
  --green-800: #2a602c;
  --green-900: #1e4620;
  --yellow-50: #fffcf5;
  --yellow-100: #fef0cd;
  --yellow-200: #fde4a5;
  --yellow-300: #fdd87d;
  --yellow-400: #fccc55;
  --yellow-500: #fbc02d;
  --yellow-600: #d5a326;
  --yellow-700: #b08620;
  --yellow-800: #8a6a19;
  --yellow-900: #644d12;
  --cyan-50: #f2fcfd;
  --cyan-100: #c2eff5;
  --cyan-200: #91e2ed;
  --cyan-300: #61d5e4;
  --cyan-400: #30c9dc;
  --cyan-500: #00bcd4;
  --cyan-600: #00a0b4;
  --cyan-700: #008494;
  --cyan-800: #006775;
  --cyan-900: #004b55;
  --pink-50: #fef4f7;
  --pink-100: #fac9da;
  --pink-200: #f69ebc;
  --pink-300: #f1749e;
  --pink-400: #ed4981;
  --pink-500: #e91e63;
  --pink-600: #c61a54;
  --pink-700: #a31545;
  --pink-800: #801136;
  --pink-900: #5d0c28;
  --indigo-50: #f5f6fb;
  --indigo-100: #d1d5ed;
  --indigo-200: #acb4df;
  --indigo-300: #8893d1;
  --indigo-400: #6372c3;
  --indigo-500: #3f51b5;
  --indigo-600: #36459a;
  --indigo-700: #2c397f;
  --indigo-800: #232d64;
  --indigo-900: #192048;
  --teal-50: #f2faf9;
  --teal-100: #c2e6e2;
  --teal-200: #91d2cc;
  --teal-300: #61beb5;
  --teal-400: #30aa9f;
  --teal-500: #009688;
  --teal-600: #008074;
  --teal-700: #00695f;
  --teal-800: #00534b;
  --teal-900: #003c36;
  --orange-50: #fff8f2;
  --orange-100: #fde0c2;
  --orange-200: #fbc791;
  --orange-300: #f9ae61;
  --orange-400: #f79530;
  --orange-500: #f57c00;
  --orange-600: #d06900;
  --orange-700: #ac5700;
  --orange-800: #874400;
  --orange-900: #623200;
  --bluegray-50: #f7f9f9;
  --bluegray-100: #d9e0e3;
  --bluegray-200: #bbc7cd;
  --bluegray-300: #9caeb7;
  --bluegray-400: #7e96a1;
  --bluegray-500: #607d8b;
  --bluegray-600: #526a76;
  --bluegray-700: #435861;
  --bluegray-800: #35454c;
  --bluegray-900: #263238;
  --purple-50: #faf4fb;
  --purple-100: #e7cbec;
  --purple-200: #d4a2dd;
  --purple-300: #c279ce;
  --purple-400: #af50bf;
  --purple-500: #9c27b0;
  --purple-600: #852196;
  --purple-700: #6d1b7b;
  --purple-800: #561561;
  --purple-900: #3e1046;
}

:root[theme="anywhere-default-dark-violet"],
:root[data-theme="anywhere-default-dark-violet"] {
  //main color scheme
  --primaryColor: #c75aae;
  --primaryColorRGBValue: 199, 90, 174;
  --primaryDarkColor: #ba489d;
  --primaryDarkColorRGBValue: 114, 0, 204;
  --primaryDarkerColor: #a62e84;
  --primaryDarkerColorRGBValue: 85, 0, 153;
  --primaryTextColor: #ffffff;
  //hsl colors
  --primary-color-h: 314;
  --primary-color-s: 49%;
  --primary-color-l: 57%;

  --textColor: rgba(255, 255, 255, 0.87);
  --textSecondaryColor: rgba(255, 255, 255, 0.6);

  --focusOutlineColor: hsl(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + 10%));
  --focusShadow: 0 0 0 0.2rem var(--focusOutlineColor);

  --inputBgColor: #121212;
  --inputBorder: 1px solid #383838;
  --inputHoverBorderColor: var(--primaryDarkColor);
  --inputPlaceholderTextColor: var(--textSecondaryColor);

  --inputListBg: #1e1e1e;
  --inputListItemHoverBgColor: rgba(255, 255, 255, 0.04);
  --inputListItemHoverTextColor: var(--textColor);
  --inputListHeaderBorder: var(--inputBorder);
  --inputListHeaderBg: #1e1e1e;
  --inputListHeaderBorder: var(--inputBorder);

  --inputSwitchSliderOffBg: #383838;
  --inputSwitchSliderOffHoverBg: rgba(255, 255, 255, 0.03);
  --inputSwitchHandleOffBg: var(--textSecondaryColor);
  --inputSwitchHandleOnBg: var(--textColor);

  --checkboxBorder: 2px solid #383838;

  --panelContentBg: #1e1e1e;

  --tabviewNavBg: transparent;
  --tabviewNavBorder: 2px solid #383838;
  --tabviewHeaderBg: #1e1e1e;
  // --tabviewHeaderBorder: solid #383838;
  --tabviewHeaderBorderColor: transparent transparent #383838 transparent;
  --tabviewHeaderHoverBg: #1e1e1e;
  --tabviewHeaderActiveBg: #1e1e1e;
  --tabviewHeaderHoverBorderColor: var(--primaryColor);
  --tabviewHeaderTextHoverColor: var(--textColor);

  // buttons
  --plainButtonTextColor: var(--textSecondaryColor);
  --plainButtonHoverBgColor: rgba(255, 255, 255, 0.03);
  --plainButtonActiveBgColor: rgba(255, 255, 255, 0.16);
  --secondaryButtonBg: #78909c;
  --secondaryButtonTextColor: #ffffff;
  --secondaryButtonBorder: 1px solid #78909c;
  --secondaryButtonHoverBg: #657d8a;
  --secondaryButtonTextHoverColor: #ffffff;
  --secondaryButtonHoverBorderColor: #657d8a;
  --secondaryButtonActiveBg: #48616e;
  --secondaryButtonTextActiveColor: #ffffff;
  --secondaryButtonActiveBorderColor: #48616e;
  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(200, 15%, calc(54% + 10%));
  --successButtonBg: #c5e1a5;
  --successButtonTextColor: #121212;
  --successButtonBorder: 1px solid #c5e1a5;
  --successButtonHoverBg: #b8d993;
  --successButtonTextHoverColor: #121212;
  --successButtonHoverBorderColor: #b8d993;
  --successButtonActiveBg: #a3cd79;
  --successButtonTextActiveColor: #121212;
  --successButtonActiveBorderColor: #a3cd79;
  --successButtonFocusShadow: 0 0 0 0.2rem hsl(88, 50%, calc(76% + 10%));
  --infoButtonBg: #81d4fa;
  --infoButtonTextColor: #121212;
  --infoButtonBorder: 1px solid #81d4fa;
  --infoButtonHoverBg: #6ec9f9;
  --infoButtonTextHoverColor: #121212;
  --infoButtonHoverBorderColor: #6ec9f9;
  --infoButtonActiveBg: #51b9f6;
  --infoButtonTextActiveColor: #121212;
  --infoButtonActiveBorderColor: #51b9f6;
  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(199, 92%, calc(74% + 10%));
  --warningButtonBg: #ffe082;
  --warningButtonTextColor: #121212;
  --warningButtonBorder: 1px solid #ffe082;
  --warningButtonHoverBg: #ffd86f;
  --warningButtonTextHoverColor: #121212;
  --warningButtonHoverBorderColor: #ffd86f;
  --warningButtonActiveBg: #ffcb52;
  --warningButtonTextActiveColor: #121212;
  --warningButtonActiveBorderColor: #ffcb52;
  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
  --helpButtonBg: #ce93d8;
  --helpButtonTextColor: #121212;
  --helpButtonBorder: 1px solid #ce93d8;
  --helpButtonHoverBg: #c280ce;
  --helpButtonTextHoverColor: #121212;
  --helpButtonHoverBorderColor: #c280ce;
  --helpButtonActiveBg: #b064bf;
  --helpButtonTextActiveColor: #121212;
  --helpButtonActiveBorderColor: #b064bf;
  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(291, 64%, calc(42% + 30%));
  --dangerButtonBg: #f48fb1;
  --dangerButtonTextColor: #121212;
  --dangerButtonBorder: 1px solid #f48fb1;
  --dangerButtonHoverBg: #f17ca1;
  --dangerButtonTextHoverColor: #121212;
  --dangerButtonHoverBorderColor: #f17ca1;
  --dangerButtonActiveBg: #ec6088;
  --dangerButtonTextActiveColor: #121212;
  --dangerButtonActiveBorderColor: #ec6088;
  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(4, 90%, calc(58% + 30%));

  --radiobuttonBorder: 2px solid #383838;
}
