:root {
  --color-accent: var(--color-cyan-400);
  --color-accent-dark: var(--color-cyan-500);
  --color-danger: var(--color-red-500);
  --color-success: var(--color-emerald-500);
  --color-warning: var(--color-amber-500);

  --text-main: var(--color-slate-900);
  --text-secondary: var(--color-slate-400);
  --text-tertiary: var(--color-slate-500);
  --text-light: var(--color-slate-50);
  --text-light-hover: var(--color-slate-200);
  --text-accent: var(--color-accent);
  --text-accent-dark: var(--color-accent-dark);
  --text-danger: var(--color-danger);
  --text-success: var(--color-success);

  --bg-main: var(--color-slate-50);
  --bg-secondary: var(--color-slate-100);
  --bg-tertiary: var(--color-white);
  --bg-dark: var(--color-slate-950);
  --bg-accent: var(--color-cyan-500);
  --bg-accent-light: var(--color-cyan-100);

  --border-main: var(--color-slate-200);
  --border-accent: var(--color-cyan-300);

  --bg-message-client: var(--color-white);
  --bg-message-bot: var(--color-emerald-200);
  --bg-message-operator: var(--color-cyan-200);
  --bg-message-replay: rgba(255, 255, 255, 0.3);

  --bg-status-active: var(--color-success);
  --bg-status-waiting: var(--color-warning);
  --bg-status-closed: var(--color-danger);

  --bg-counter: var(--color-success);
  --text-counter: var(--color-white);

  --bg-btn: var(--color-cyan-500);
  --bg-btn-hover: var(--color-cyan-600);
  --text-btn: var(--color-white);
  --ring-btn: var(--bg-btn);

  --bg-btn-success: var(--color-green-600);
  --bg-btn-success-hover: var(--color-green-700);
  --text-btn-success: var(--color-white);
  --ring-btn-success: var(--bg-btn-success);

  --bg-btn-danger: var(--color-red-600);
  --bg-btn-danger-hover: var(--color-red-700);
  --text-btn-danger: var(--color-white);
  --ring-btn-danger: var(--bg-btn-danger);

  --bg-btn-grey: var(--color-gray-400);
  --bg-btn-grey-hover: var(--color-gray-500);
  --text-btn-grey: var(--color-white);
  --ring-btn-grey: var(--bg-btn-grey);

  --bg-btn-secondary: var(--color-slate-200);
  --bg-btn-secondary-hover: var(--color-slate-300);
  --text-btn-secondary: var(--text-tertiary);
  --text-btn-secondary-hover: var(--text-main);
  --ring-btn-secondary: var(--bg-btn-secondary);

  --bg-popup-overlay: rgba(0, 0, 0, 0.5);
  --bg-popup: var(--bg-main);
  --text-popup: var(--text-main);

  --bg-gradient-grid: #ffffff;
  --bg-left-top-gradient: var(--color-pink-200);
  --bg-right-bottom-gradient: var(--color-cyan-200);
  --animate-border-thumb-color: var(--color-cyan-300);
}

html.dark {
  --text-main: var(--color-slate-50);
  --text-tertiary: var(--color-slate-300);

  --bg-main: var(--color-slate-900);
  --bg-secondary: var(--color-slate-800);
  --bg-tertiary: var(--color-slate-950);
  --bg-accent-light: var(--color-cyan-900);

  --border-main: var(--color-slate-700);
  --border-accent: var(--color-cyan-700);

  --bg-message-client: var(--color-slate-700);
  --bg-message-bot: var(--color-emerald-700);
  --bg-message-operator: var(--color-cyan-600);
  --bg-message-replay: rgba(0, 0, 0, 0.1);

  --bg-btn-secondary: var(--color-slate-600);
  --bg-btn-secondary-hover: var(--color-slate-500);

  --bg-gradient-grid: #4f4f4f2e;
  --bg-left-top-gradient: var(--color-pink-500);
  --bg-right-bottom-gradient: var(--color-cyan-500);
  --animate-border-thumb-color: var(--color-cyan-400);
}