:root {
  /* Light Theme Colors */
  --light-theme-background: #ffffff;
  --light-theme-background96: #fffffff4;
  --light-theme-card: #f6f7f7;
  --light-theme-field: #e9e9eb;
  --light-theme-disabled: #f1f1f3;
  --light-theme-divider: #d6d7db;
  --light-theme-text-secondary: #6b6e79;
  --light-theme-text-main: #17181b;
  --light-theme-text-contrast: #ffffff;
  --light-theme-text-secondary40: #6b6e7966;
  --light-theme-accent: #06a502;
  --light-theme-accent-hover: #07b903;
  --light-theme-accent40: #07a50366;
  --light-theme-accent10: #07a50333;
  --light-theme-demo: #0073e5;
  --light-theme-negative: #d03615;
  --light-theme-positive: #129d5e;
  --light-theme-medium: #d8c400;
  --light-theme-negative20: #d0361533;
  --light-theme-positive20: #129d5e33;
  --light-theme-medium20: #d8c40033;
  --light-theme-tooltip: #000000;
  --light-theme-overlay: #0b0c0db2;

  /* Dark Theme Colors */
  --dark-theme-background: #17181b;
  --dark-theme-background96: #17181bf4;
  --dark-theme-card: #1f2023;
  --dark-theme-field: #2b2c30;
  --dark-theme-disabled: #232428;
  --dark-theme-divider: #3b3d43;
  --dark-theme-text-secondary: #878a94;
  --dark-theme-text-main: #ffffff;
  --dark-theme-text-contrast: #ffffff;
  --dark-theme-text-secondary40: #878a9466;
  --dark-theme-accent: #06a502;
  --dark-theme-accent-hover: #07b903;
  --dark-theme-accent40: #07a50366;
  --dark-theme-accent10: #07a50333;
  --dark-theme-demo: #0073e5;
  --dark-theme-negative: #d03615;
  --dark-theme-positive: #129d5e;
  --dark-theme-medium: #d8c400;
  --dark-theme-negative20: #d0361533;
  --dark-theme-positive20: #129d5e33;
  --dark-theme-medium20: #d8c40033;
  --dark-theme-tooltip: #000000;
  --dark-theme-overlay: #0b0c0db2;
}

/* Apply Light Theme */
.light-theme {
  --background: var(--light-theme-background);
  --background96: var(--light-theme-background96);
  --card: var(--light-theme-card);
  --field: var(--light-theme-field);
  --disabled: var(--light-theme-disabled);
  --divider: var(--light-theme-divider);
  --text-secondary: var(--light-theme-text-secondary);
  --text-main: var(--light-theme-text-main);
  --text-contrast: var(--light-theme-text-contrast);
  --text-secondary40: var(--light-theme-text-secondary40);
  --accent: var(--light-theme-accent);
  --accent-hover: var(--light-theme-accent-hover);
  --accent40: var(--light-theme-accent40);
  --accent10: var(--light-theme-accent10);
  --demo: var(--light-theme-demo);
  --negative: var(--light-theme-negative);
  --positive: var(--light-theme-positive);
  --medium: var(--light-theme-medium);
  --negative20: var(--light-theme-negative20);
  --positive20: var(--light-theme-positive20);
  --medium20: var(--light-theme-medium20);
  --tooltip: var(--light-theme-tooltip);
  --overlay: var(--light-theme-overlay);
}

/* Apply Dark Theme */
.dark-theme {
  --background: var(--dark-theme-background);
  --background96: var(--dark-theme-background96);
  --card: var(--dark-theme-card);
  --field: var(--dark-theme-field);
  --disabled: var(--dark-theme-disabled);
  --divider: var(--dark-theme-divider);
  --text-secondary: var(--dark-theme-text-secondary);
  --text-main: var(--dark-theme-text-main);
  --text-contrast: var(--dark-theme-text-contrast);
  --text-secondary40: var(--dark-theme-text-secondary40);
  --accent: var(--dark-theme-accent);
  --accent-hover: var(--dark-theme-accent-hover);
  --accent40: var(--dark-theme-accent40);
  --accent10: var(--dark-theme-accent10);
  --demo: var(--dark-theme-demo);
  --negative: var(--dark-theme-negative);
  --positive: var(--dark-theme-positive);
  --medium: var(--dark-theme-medium);
  --negative20: var(--dark-theme-negative20);
  --positive20: var(--dark-theme-positive20);
  --medium20: var(--dark-theme-medium20);
  --tooltip: var(--dark-theme-tooltip);
  --overlay: var(--dark-theme-overlay);
}