:root {
  --font-family-main: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-main: 16px;
  --line-height-main: 1.5;

  --accent: var(--color-cyan-500);
  --accent-hover: var(--color-cyan-600);

  --bg-main: var(--color-slate-50);
  --bg-secondary: var(--color-white);
  --bg-tertiary: var(--color-slate-200);
  --text-main: var(--color-slate-900);
  --text-secondary: var(--color-slate-400);
  --border: var(--color-slate-200);

  --input-border: var(--border);
  --input-border-focus: var(--accent);
  --input-bg: var(--bg-secondary);
  --input-placeholder: var(--text-secondary);
  --input-icon: var(--input-placeholder);
  --input-text: var(--text-main);

  --btn-bg: var(--accent);
  --btn-border: var(--btn-bg);
  --btn-color: var(--color-white);
  --btn-bg-hover: var(--accent-hover);
  --btn-border-hover: var(--btn-bg-hover);
  --btn-color-hover: var(--color-white);

  --secondary-btn-bg: var(--color-gray-400);
  --secondary-btn-border: var(--secondary-btn-bg);
  --secondary-btn-color: var(--color-white);
  --secondary-btn-bg-hover: var(--color-gray-500);
  --secondary-btn-border-hover: var(--secondary-btn-bg-hover);
  --secondary-btn-color-hover: var(--color-white);

  --close-btn-color: inherit;
  --loader-spinner-color: inherit;

  --login-bg: transparent;
  --login-text: inherit;
  --login-icon: var(--accent);
  --login-title: inherit;
  --login-subtitle: var(--text-secondary);

  --chat-bg: transparent;
  --chat-text: inherit;

  --chat-content-bg: var(--bg-secondary);
  --chat-content-text: inherit;

  --chat-header-bg: transparent;
  --chat-header-text: inherit;
  --chat-header-border: var(--border);

  --chat-footer-bg: transparent;
  --chat-footer-text: inherit;
  --chat-footer-border: var(--border);

  --chat-input-border: var(--input-border);
  --chat-input-border-focus: var(--input-border-focus);
  --chat-input-bg: var(--input-bg);
  --chat-input-placeholder: var(--input-placeholder);
  --chat-input-text: var(--input-text);

  --chat-btn-bg: var(--btn-bg);
  --chat-btn-border: var(--chat-btn-bg);
  --chat-btn-color: var(--btn-color);
  --chat-btn-bg-hover: var(--btn-bg-hover);
  --chat-btn-border-hover: var(--chat-btn-bg-hover);
  --chat-btn-color-hover: var(--chat-btn-color);

  --chat-file-btn-bg: var(--secondary-btn-bg);
  --chat-file-btn-border: var(--chat-file-btn-bg);
  --chat-file-btn-color: var(--secondary-btn-color);
  --chat-file-btn-bg-hover: var(--secondary-btn-bg-hover);
  --chat-file-btn-border-hover: var(--chat-file-btn-bg-hover);
  --chat-file-btn-color-hover: var(--chat-file-btn-color);

  --file-border: var(--border);
  --file-bg: transparent;
  --file-icon-bg: var(--secondary-btn-bg);
  --file-text: inherit;

  --file-remove-btn-bg: var(--secondary-btn-bg);
  --file-remove-btn-border: var(--file-remove-btn-bg);
  --file-remove-btn-color: var(--secondary-btn-color);
  --file-remove-btn-bg-hover: var(--secondary-btn-bg-hover);
  --file-remove-btn-border-hover: var(--file-remove-btn-bg-hover);
  --file-remove-btn-color-hover: var(--file-remove-btn-color);

  --chat-author-text: inherit;
  --chat-date-text: var(--text-secondary);

  --chat-bubble-bg-bot: var(--color-emerald-200);
  --chat-bubble-text-bot: inherit;

  --chat-bubble-bg-operator: var(--color-cyan-200);
  --chat-bubble-text-operator: inherit;
  --chat-bubble-bg-client: var(--bg-tertiary);
  --chat-bubble-text-client: inherit;

  --chat-vote-color-1: var(--color-red-500);
  --chat-vote-color-3: var(--color-yellow-500);
  --chat-vote-color-5: var(--color-green-500);
}

html.dark {
  --bg-main: var(--color-slate-900);
  --bg-secondary: var(--color-slate-800);
  --bg-tertiary: var(--color-slate-700);
  --text-main: var(--color-slate-50);
  --text-secondary: var(--color-slate-400);
  --border: var(--color-slate-700);

  --chat-bubble-bg-bot: var(--color-emerald-700);
  --chat-bubble-bg-operator: var(--color-cyan-600);
}