:root {
	/* Font Families */
	--font-sans: "Lato", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Simple Colors */

  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-crust: #11111b;

	/* Colors */
	--channels-pane-background: var(--ctp-mocha-base);
	--chat-avatar-background: var(--ctp-mocha-surface0);
	--chat-avatar-text-color: var(--ctp-mocha-text);
	--chat-reaction-pill-background: var(--ctp-mocha-surface0);
	--chat-reaction-pill-border-color: var(--ctp-mocha-surface2);
	--chat-reaction-pill-hover-background: var(--ctp-mocha-surface1);
	--chat-text-color: var(--ctp-mocha-text);
	--chat-text-hover-background: var(--ctp-mocha-surface0);
	--chat-timestamp-text-color: var(--ctp-mocha-subtext0);
	--emoji-option-background: transparent;
	--emoji-picker-background: var(--ctp-mocha-surface0);
	--emoji-picker-border-color: var(--ctp-mocha-surface2);
	--header-background: var(--ctp-mocha-surface0);
	--header-border-color: var(--ctp-mocha-surface2);
	--header-toggle-background: var(--ctp-mocha-base);
	--header-toggle-border-color: var(--ctp-mocha-surface2);
	--link-preview-card-background: var(--ctp-mocha-surface1);
	--link-preview-card-border-color: var(--ctp-mocha-surface2);
	--link-preview-card-hover-background: var(--ctp-mocha-surface2);
	--link-preview-card-hover-border-color: var(--ctp-mocha-surface2);
	--login-backdrop-background: rgba(17, 17, 27, .5);
	--login-background: var(--ctp-mocha-base);
	--login-border-color: var(--ctp-mocha-surface2);
	--login-field-input-border-color: var(--ctp-mocha-surface2);
	--login-modal-background: var(--ctp-mocha-surface0);
	--login-modal-shadow: var(--ctp-mocha-mantle);
	--login-text-color: var(--ctp-mocha-text);
	--members-pane-background: var(--ctp-mocha-surface0);
	--members-pane-border-color: var(--ctp-mocha-surface2);
	--menu-backdrop-background: rgba(17, 17, 27, .5);
	--menu-close-background: transparent;
	--menu-header-border-color: var(--ctp-mocha-surface2);
	--menu-item-background: var(--ctp-mocha-surface1);
	--menu-item-border-color: var(--ctp-mocha-surface2);
	--menu-modal-background: var(--ctp-mocha-base);
	--menu-modal-shadow: var(--ctp-mocha-mantle);
	--mobile-pane-background: var(--ctp-mocha-base);
	--pane-border-color: var(--ctp-mocha-surface2);
	--raw-backdrop-background: rgba(17, 17, 27, .5);
	--raw-close-background: transparent;
	--raw-form-border-color: var(--ctp-mocha-surface2);
	--raw-header-border-color: var(--ctp-mocha-surface2);
	--raw-input-background: var(--ctp-mocha-base);
	--raw-input-focus: #var(var(--ctp-mocha-surface2));
	--raw-input-text-color: var(--ctp-mocha-text);
	--raw-modal-background: var(--ctp-mocha-base);
	--raw-modal-shadow: var(--ctp-mocha-mantle);
	--raw-modal-text-color: var(--ctp-mocha-text);
	--raw-mode-header-border: var(--ctp-mocha-surface2);
	--raw-mode-inner-text-color: var(--ctp-mocha-text);
	--raw-mode-overlay-background: var(--ctp-mocha-base);
	--raw-mode-send-border: var(--ctp-mocha-surface2);
	--raw-send-background: var(--ctp-mocha-surface0);
	--raw-send-text-color: var(--ctp-mocha-text);
	--upgrade-notice-background: var(--ctp-mocha-red);
	--upgrade-notice-text-color: var(--ctp-mocha-crust);
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--ctp-mocha-surface2) var(--ctp-mocha-base);
}

body {
	background-color: var(--ctp-mocha-base);
	color: var(--ctp-mocha-text);
}

input, button, fieldset {
	background-color: inherit;
	border-color: var(--ctp-mocha-surface2);
	color: inherit;
	border-style: solid;
	appearance: none;
	border-radius: .3rem;
	border-width: 1px;
	padding: .3rem .5rem;
	margin: .3rem 0rem;
}