:root {
  --primary-bg-color: #20242B;
  --secondary-bg-color: #20242B;
  --editor-bg-color: #272B34;
  --border-color: #1a1e25;
  --ui-text-color: #d8d8d8;

  --sn-stylekit-info-color: #61AFEF;
  --sn-stylekit-info-contrast-color: #282C34;

  --sn-stylekit-neutral-color: #ABB2BF;
  --sn-stylekit-neutral-contrast-color: #282C34;

  --sn-stylekit-success-color: #98C379;
  --sn-stylekit-success-contrast-color: #282C34;

  --sn-stylekit-warning-color: #E5C07B;
  --sn-stylekit-warning-contrast-color: #282C34;

  --sn-stylekit-danger-color: #E06C75;
  --sn-stylekit-danger-contrast-color: #282C34;

  --sn-desktop-titlebar-bg-color: var(--primary-bg-color);
  --sn-desktop-titlebar-border-color: var(--border-color);
  --sn-desktop-titlebar-ui-color: var(--ui-text-color);
  --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color);

  // StyleKit Vars
  --sn-stylekit-shadow-color: #272B34;

  --sn-stylekit-background-color: #272B34;
  --sn-stylekit-border-color: var(--border-color);
  --sn-stylekit-foreground-color: var(--ui-text-color);

  --sn-stylekit-contrast-background-color: var(--secondary-bg-color);
  --sn-stylekit-contrast-foreground-color: var(--ui-text-color);
  --sn-stylekit-contrast-border-color: var(--border-color);

  --sn-stylekit-secondary-background-color: #272B34;
  --sn-stylekit-secondary-foreground-color: var(--ui-text-color);
  --sn-stylekit-secondary-border-color: var(--border-color);

  --sn-stylekit-secondary-contrast-background-color: #45445a;
  --sn-stylekit-secondary-contrast-foreground-color: var(--ui-text-color);
  --sn-stylekit-secondary-contrast-border-color: var(--border-color);

  --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
  --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);

  --sn-stylekit-paragraph-text-color: var(--ui-text-color);

  --sn-stylekit-scrollbar-track-border-color: var(--border-color);
  --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
}