:root {
  --background-1: #3c3836;
  --background-2: #282828;

  --foreground-1: #f9f5d7;
  --foreground-2: #d5c41a;
  --foreground-3: #ebdbb2;

  --highlight-color: #458588;
  --neutral-color: #928374;
  --danger-color: #fb4934;
  --success-color: #689d6a;
  --warning-color: #d65d0e;
  --border-color: #1d2021;

  /* Footer */
  --footer-bar-border-top-color: 0;

  // StyleKit Vars
  --sn-stylekit-info-color: var(--highlight-color);
  --sn-stylekit-info-contrast-color: var(--foreground-1);

  --sn-stylekit-neutral-color: var(--neutral-color);
  --sn-stylekit-neutral-contrast-color: var(--background-2); // TODO

  --sn-stylekit-success-color: var(--success-color);
  --sn-stylekit-success-contrast-color: var(--background-2); // TODO

  --sn-stylekit-warning-color: var(--warning-color);
  --sn-stylekit-warning-contrast-color: var(--background-2); // TODO

  --sn-stylekit-danger-color: var(--danger-color);
  --sn-stylekit-danger-contrast-color: var(--background-2); // TODO

  --sn-stylekit-shadow-color: var(--background-2);

  --sn-stylekit-background-color: var(--background-1);
  --sn-stylekit-foreground-color: var(--foreground-1);
  --sn-stylekit-border-color: var(--border-color);

  --sn-stylekit-paragraph-text-color: var(--foreground-1);

  --sn-stylekit-contrast-background-color: var(--background-2);
  --sn-stylekit-contrast-foreground-color: var(--foreground-1);
  --sn-stylekit-contrast-border-color: var(--border-color);

  --sn-stylekit-secondary-background-color: var(--background-2);
  --sn-stylekit-secondary-foreground-color: var(--foreground-2);
  --sn-stylekit-secondary-border-color: var(--border-color);

  --sn-stylekit-secondary-contrast-background-color: var(--background-1);
  --sn-stylekit-secondary-contrast-foreground-color: var(--foreground-1);
  --sn-stylekit-secondary-contrast-border-color: var(--border-color);

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

  --sn-stylekit-input-placeholder-color: var(--foreground-2);
  --sn-stylekit-input-border-color: var(--border-color);

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

  --sn-desktop-titlebar-bg-color: var(--background-1);
  --sn-desktop-titlebar-border-color: var(--border-color);
  --sn-desktop-titlebar-ui-color: var(--foreground-1);
  --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);

  .sk-app-bar {
    color: var(--foreground-2) !important;
  }

  .title {
    color: var(--foreground-3) !important;
  }

  .sk-menu-panel {
    color: var(--foreground-1) !important;
  }

  #notes-scrollable {
    background-color: var(--background-2) !important;
  }

  #notes-column .note,
  #notes-column .tag {
    opacity: 1 !important;
    background-color: var(--background-2) !important;
    color: var(--foreground-3) !important;
  }

  #notes-column .note .name {
    color: var(--foreground-3) !important;
  }

  #notes-column .note .plain-preview {
    color: var(--foreground-3) !important;
  }

  #notes-column .note progress {
    border: 1px solid var(--border-color) !important;
  }

  /* Note flags */
  #notes-column .note .note-flags .flag.info,
  .notes .note .note-flags .flag.info {
    background-color: var(--background-1) !important;
    color: var(--sn-stylekit-info-color) !important;
  }
  #notes-column .note .note-flags .flag.success,
  .notes .note .note-flags .flag.success {
    background-color: var(--background-1) !important;
    color: var(--sn-stylekit-success-color);
  }
  #notes-column .note .note-flags .flag.warning,
  .notes .note .note-flags .flag.warning {
    background-color: var(--background-1) !important;
    color: var(--sn-stylekit-warning-color);
  }
  #notes-column .note .note-flags .flag.neutral,
  .notes .note .note-flags .flag.neutral {
    background-color: var(--background-1) !important;
    color: var(--sn-stylekit-neutral-color);
  }
  #notes-column .note .note-flags .flag.danger,
  .notes .note .note-flags .flag.danger {
    background-color: var(--background-1) !important;
    color: var(--sn-stylekit-danger-color);
  }
  
  #notes-column .note.selected .note-flags .flag.info,
  .notes .note.selected .note-flags .flag.info {
    background-color: var(--background-2) !important;
  }
  #notes-column .note.selected .note-flags .flag.success,
  .notes .note.selected .note-flags .flag.success {
    background-color: var(--background-2) !important;
  }
  #notes-column .note.selected .note-flags .flag.warning,
  .notes .note.selected .note-flags .flag.warning {
    background-color: var(--background-2) !important;
  }
  #notes-column .note.selected .note-flags .flag.neutral,
  .notes .note.selected .note-flags .flag.neutral {
    background-color: var(--background-2) !important;
  }
  #notes-column .note.selected .note-flags .flag.danger,
  .notes .note.selected .note-flags .flag.danger {
    background-color: var(--background-2) !important;
  }

  /* Note selected */
  #notes-column .note.selected,
  #tags-column .tag.selected,
  .tag-tree .self.selected:before {
    background: none !important;
    background-color: var(--background-1) !important;
  }

  /* Sidebar note properties: Dates, tags, etc. */
  #notes-column .note .date.faded,
  #notes-column .note .tags-string>.faded,
  #notes-column .note .note-flag,
  .editor-tags input {
    opacity: 1 !important;
    color: var(--neutral-color) !important;
  }

  /* Workaround for subitems in Markdown lists not colored using StyleKit */
  .cm-s-default .cm-variable-3,
  .cm-s-default .cm-type {
    color: var(--success-color) !important;
  }

  /* Progress bars */
  #notes-column .note progress, .notes .note progress {
    background-color: var(--background-2) !important;
    color: var(--foreground-2) !important;
  }
  #notes-column .note progress::-webkit-progress-bar, .notes .note progress::-webkit-progress-bar {
    background-color: var(--background-2) !important;
  }
  #notes-column .note progress::-webkit-progress-value, .notes .note progress::-webkit-progress-value {
    background-color: var(--foreground-2) !important;
  }
  #notes-column .note.selected progress, .notes .note.selected progress {
    background-color: var(--background-2) !important;
    color: var(--foreground-2) !important;
  }
  #notes-column .note.selected progress::-webkit-progress-bar, .notes .note.selected progress::-webkit-progress-bar {
    background-color: var(--background-2) !important;
  }
  #notes-column .note.selected progress::-webkit-progress-value, .notes .note.selected progress::-webkit-progress-value {
    background-color: var(--foreground-2) !important;
  }

  /* Text selection color */
  ::selection {  
    background: var(--success-color) !important;
    color: var(--foreground-1) !important;
  }

  /* Use lighter blue for Minimal Markdown Editor sublists and other CodeMirror elements */
  .cm-s-default .cm-variable-3 {
    color: #7e9a8f !important;
  }
}