body {
    --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace;
    -webkit-font-smoothing: auto;
    --h1-color: var(--text-title-h1);
    --h2-color: var(--text-title-h2);
    --h3-color: var(--text-title-h3);
    --h4-color: var(--text-title-h4);
    --h5-color: var(--text-title-h5);
    --h6-color: var(--text-title-h6);
}

:root
{
--bg0-dark: #22242c;
--bg1-dark: #1d3136;
--bg-dark: #22242c;
--bg2-dark: #3f3e44;
--bg3-dark: #424255;
--bg4-dark: #3b5f59;
--bg5-dark: #675458;
--bg_visual: #3f3e44;
--bg_red: #3f3e44;
--bg_green: #3f3e44;
--bg_blue: #3b5f59;
--bg_yellow: #3f3e44;
    --shadow:         #00000070;

--fg-dark: #c8bfa3;
--grey0-dark: #767883;
--grey1-dark: #767883;
--grey2-dark: #a1a28b;

--faded-red: #e89080;
--faded-orange: #e89080;
--faded-yellow: #f2bb85;
--faded-green: #9ac386;
--faded-aqua: #3b5f59;
--faded-blue: #5e6c98;
--faded-purple: #dfa1a0;

--dim-red: #eb6b50;
--dim-orange: #cc8a60;
--dim-yellow: #aeb44c;
--dim-green: #8d9940;
--dim-aqua: #669371;
--dim-blue: #5e6c98;
--dim-purple: #b67694;


    /* 2.2 Light theme color variables */
--bg0-light: #f2efdc;
--bg1-light: #f2efdc;
--bg-light: #f5eadc;
--bg2-light: #f2efdc;
--bg3-light: #f2efdc;
--bg4-light: #e6e0bc;
--bg5-light: #e6e0bc;
--grey0-light: #b2b1a9;
--grey1-light: #a1a28b;
--grey2-light: #a1a28b;
    --shadow-light:  #3c474d20;


--bg_visual_light: #e6e0bc;
--bg_red_light: #f5eadc;
--bg_green_light: #f2efdc;
--bg_blue_light: #e1f5e6;
--bg_yellow_light: #fee9c2;

--fg-light: #526b7c;
    
--light-red: #eb6b50;--light-purple: #b67694;

--light-orange: #eb6b50;
--light-yellow: #aeb44c;
--light-green: #8d9940;
--light-aqua: #669371;
--light-blue: #a0c7c3;

--light-dim-red: #f95d70;
--light-dim-orange: #f98d5b;
--light-dim-yellow: #d0ce5d;
--light-dim-green: #aeb44c;
--light-dim-aqua: #9ac386;
--light-dim-blue: #a0c7c3;
--light-dim-purple: #dfa1a0;

--tag-background: rgba(94,108,152,10%);
--tag-background-hover: rgba(94,108,152,20%);
--tag-border-width: 0px;
--tag-padding-x: 0.65em;
--tag-padding-y: 0.25em;
--tag-radius: 2em;
--tag-border-color: rgba(94,108,152,15%);
--tag-border-color-hover: rgba(94,108,152,15%);
--tag-color: var(--dim-blue);
--tag-color-hover: var(--dim-blue);

}

/* 2.3 Dark theme implementation */
.theme-dark
{
    --background-primary:         var(--bg-dark);
    --background-primary-alt:     var(--bg-dark);
    --background-secondary:       var(--bg-dark);
    --background-secondary-alt:   var(--bg-dark);
    --text-normal:                var(--fg-dark);
    --text-faint:                 var(--grey1-dark);
    --text-title-h1:              var(--dim-red);
    --text-title-h2:              var(--dim-orange);
    --text-title-h3:              var(--dim-yellow);
    --text-title-h4:              var(--dim-green);
    --text-title-h5:              var(--dim-aqua);
    --text-title-h6:              var(--dim-purple);
    --text-link:                  var(--faded-blue);
    --text-a:                     var(--dim-aqua);
    --text-a-hover:               var(--faded-aqua);
    --text-mark:                  rgba(215, 153, 33, 0.4); /* light-yellow */
    --pre-code:                   var(--bg1-dark);
    --text-highlight-bg:          var(--bg_green);
    --interactive-accent:         var(--dim-blue);
    --interactive-before:         var(--bg5-dark);
    --background-modifier-border: var(--bg5-dark);
    --text-accent:                var(--dim-blue);
    --interactive-accent-rgb:     var(--dim-blue);
    --inline-code:                var(--dim-blue);
    --code-block:                 var(--fg-dark);
    --vim-cursor:                 var(--faded-blue);
    --text-selection:             var(--bg5-dark);
}

/* 2.4 Light theme implementation */
.theme-light
{
    --background-primary:         var(--bg-light);
    --background-primary-alt:     var(--bg-light);
    --background-secondary:       var(--bg-light);
    --background-secondary-alt:   var(--bg-light);
    --text-normal:                var(--fg-light);
    --text-faint:                 var(--grey1-light);
    --text-title-h1:              var(--light-red);
    --text-title-h2:              var(--light-orange);
    --text-title-h3:              var(--light-yellow);
    --text-title-h4:              var(--light-green);
    --text-title-h5:              var(--light-aqua);
    --text-title-h6:              var(--light-purple);
    --text-link:                  var(--light-blue);
    --text-a:                     var(--light-dim-blue);
    --text-a-hover:               var(--light-blue);
    --text-mark:                  rgba(215, 153, 33, 0.4); /* light-yellow */
    --pre-code:                   var(--bg1-light);
    --text-highlight-bg:          var(--light-dim-green);
    --interactive-accent:         var(--bg5-light);
    --interactive-before:         var(--bg5-light);
    --background-modifier-border: var(--bg5-light);
    --text-accent:                var(--light-dim-green);
    --interactive-accent-rgb:     var(--light-dim-green);
    --inline-code:                var(--light-blue);
    --code-block:                 var(--fg-light);
    --vim-cursor:                 var(--light-blue);
    --text-selection:             rgba(189, 174, 147, 0.5); /* light3 */
}

.theme-dark code[class*="language-"],
.theme-dark pre[class*="language-"],
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"]
{
    text-shadow: none ;
    background-color: var(--pre-code) ;
}

/* 3. General UI */
.view-header-title {
    font-weight: 700;
  }
  
  /* 3.1. Title bar */
  .titlebar {
    background-color: var(--background-secondary-alt);
  }
  
  .titlebar-inner {
    color: var(--text-normal);
  }

.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight
{
    color: var(--interactive-accent-rgb) ;
}
.graph-view.color-text
{
    color: var(--text-a-hover) ;
}
/*
.graph-view.color-fill
{
    color: var(--background-secondary);
}
.graph-view.color-line
{
  color: var(--background-modifier-border);
}
*/

html,
body
{
    font-size: 16px ;
}

strong
{
    font-weight: 600 ;
}

a,
.cm-hmd-internal-link
{
    color: var(--text-a) ;
    text-decoration: none ;
}

a:hover,
.cm-hmd-internal-link:hover,
.cm-url
{
    color: var(--text-a-hover) ;
    text-decoration: none ;
}


/*----------------------------------------------------------------
TAGS
----------------------------------------------------------------*/

.token.tag {
    padding: 0px 0px;
    background-color: transparent;
    border: none;
  }
  
  .token.tag:hover {
    background: transparent;
    color: var(--text-a-hover) !important;
  }
  
  /*----------------------------------------------------------------
  TAG PILLS
  ----------------------------------------------------------------*/
  .markdown-preview-section h1 a.tag,
  .markdown-preview-section h2 a.tag,
  .markdown-preview-section h3 a.tag,
  .markdown-preview-section h4 a.tag,
  .markdown-preview-section h5 a.tag,
  .markdown-preview-section h4 a.tag {
    font-weight: inherit;
  }
  
    .tag {
    outline: 0;
    text-align: center;
    text-decoration: none!important;
    display: inline-block;
    cursor: pointer;
    transition: .1s ease-in-out;
    background-color: var(--tag-background);
    border: var(--tag-border-width) solid var(--tag-border-color);
    border-radius: var(--tag-radius);
    color: var(--tag-color);
    font-size: var(--tag-size);
    font-weight: var(--tag-weight);
    padding: var(--tag-padding-y) var(--tag-padding-x);
    line-height: 1;
  }

  .tag:hover {
    text-align: center;
    text-decoration: none!important;
    display: inline-block;
    cursor: pointer;
    transition: .1s ease-in-out;
    border-radius: var(--tag-radius);
    font-size: var(--tag-size);
    font-weight: var(--tag-weight);
    padding: var(--tag-padding-y) var(--tag-padding-x);
    line-height: 1;
    background-color: var(--tag-background-hover);
    border: var(--tag-border-width) solid var(--tag-border-color-hover);
    color: var(--tag-color-hover);
  }
  
  
  /*----------------------------------------------------------------
  TAG REF STYLING
  ----------------------------------------------------------------*/
  
  .tag[href^="#❗️"],
  .tag[href^="#important❗️"] {
    background-color: var(--tag-base);
    border: 1px solid var(--boldred);
  }
  
  .tag[href^="#📓"],
  .tag[href^="#journal📓"] {
    background-color: var(--tag-base);
    border: 1px solid var(--purple);
  }
  
  .tag[href^="#🌱"],
  .tag[href^="#seedling🌱"],
  .tag[href^="#🌿"],
  .tag[href^="#budding🌿"],
  .tag[href^="#🌳"],
  .tag[href^="#evergreen🌳"] {
    background-color: var(--tag-base);
    border: 1px solid var(--boldgreen);
  }

mark
{
    background-color: var(--text-mark) ;
}

.view-actions a
{
    color: var(--text-normal) ;
}

.view-actions a:hover
{
    color: var(--text-a) ;
}

.HyperMD-codeblock-bg
{
    background-color: var(--pre-code) ;
}

.HyperMD-codeblock
{
    line-height: 1.4em ;
    color: var(--code-block) ;
}

.HyperMD-codeblock-begin
{
    border-top-left-radius: 4px ;
    border-top-right-radius: 4px ;
}

.HyperMD-codeblock-end
{
    border-bottom-left-radius: 4px ;
    border-bottom-right-radius: 4px ;
}

th
{
    font-weight: 600 ;
}

thead
{
    border-bottom: 2px solid var(--background-modifier-border) ;
}

.HyperMD-table-row
{
    line-height: normal ;
    padding-left: 4px ;
    padding-right: 4px ;
    /* background-color: var(--pre-code) ; */
}

.HyperMD-table-row-0
{
    padding-top: 4px ;
}

.CodeMirror-foldgutter-folded,
.is-collapsed .nav-folder-collapse-indicator
{
    color: var(--text-a) ;
}

.nav-file-tag
{
    color: var(--text-a) ;
}

.is-active .nav-file-title
{
    color: var(--text-a) ;
    background-color: var(--background-primary-alt) ;
}

.nav-file-title
{
    border-bottom-left-radius: 0 ;
    border-bottom-right-radius: 0 ;
    border-top-left-radius: 0 ;
    border-top-right-radius: 0 ;
}

img
{
    display: block ;
    margin-left: auto ;
    margin-right: auto ;
}

.HyperMD-list-line
{
    padding-top: 0 ;
}

.CodeMirror-code,
.CodeMirror-linenumber,
.cm-formatting
{
    font-family: var(--font-monospace) ;
    font-size: 0.9em;
}

.markdown-preview-section pre code,
.markdown-preview-section code
{
    font-size: 0.9em ;
    background-color: var(--pre-code) ;
}

.markdown-preview-section pre code
{
    padding: 4px ;
    line-height: 1.4em ;
    display: block ;
    color: var(--code-block) ;
}

.markdown-preview-section code
{
    color: var(--inline-code) ;
}

.cm-s-obsidian,
.cm-inline-code
{
    -webkit-font-smoothing: auto ;
}

.cm-inline-code
{
    color: var(--inline-code) ;
    background-color: var(--pre-code) ;
    padding: 1px ;
}

.workspace-leaf-header-title
{
    font-weight: 600 ;
}

.side-dock-title
{
    padding-top: 15px ;
    font-size: 20px ;
}

.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover
{
    color: var(--text-a);
}

.side-dock
{
    border-right: 0 ;
}

.cm-s-obsidian,
.markdown-preview-view
{
    /* padding-left: 10px ; */
    padding-right: 10px ;
}

/* vertical resize-handle */
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle
{
    width: 1px ;
    background-color: var(--dim-aqua);
}

/* horizontal resize-handle */
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
{
    height: 1px ;
    background-color: var(--dim-aqua);
}

/* Remove vertical split padding */
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-tabs
{
    padding-right: 0px;
}

.markdown-embed-title
{
    font-weight: 600 ;
}

.markdown-embed
{
    padding-left: 10px ;
    padding-right: 10px ;
    margin-left: 10px ;
    margin-right: 10px ;
}

.cm-header-1,
.markdown-preview-section h1
{
    font-weight: 500 ;
    font-size: 34px ;
    color: var(--text-title-h1) ;
}

.cm-header-2,
.markdown-preview-section h2
{
    font-weight: 500 ;
    font-size: 26px ;
    color: var(--text-title-h2) ;
}

.cm-header-3,
.markdown-preview-section h3
{
    font-weight: 500 ;
    font-size: 22px ;
    color: var(--text-title-h3) ;
}

.cm-header-4,
.markdown-preview-section h4
{
    font-weight: 500 ;
    font-size: 20px ;
    color: var(--text-title-h4) ;
}

.cm-header-5,
.markdown-preview-section h5
{
    font-weight: 500 ;
    font-size: 18px ;
    color: var(--text-title-h5) ;
}

.cm-header-6,
.markdown-preview-section h6
{
    font-weight: 500 ;
    font-size: 18px ;
    color: var(--text-title-h6) ;
}

.suggestion-item.is-selected
{
    background-color: var(--text-selection);
}

.empty-state-container:hover
{
    background-color: var(--background-secondary-alt);
    border: 5px solid var(--interactive-accent) ;
}

.checkbox-container
{
    background-color: var(--interactive-before);
}

.checkbox-container:after
{
    background-color: var(--interactive-accent);
}

.checkbox-container.is-enabled:after 
{
    background-color: var(--bg5-dark);
}

.mod-cta
{
    color: var(--background-secondary-alt) ;
    font-weight: 600 ;
}

.mod-cta a
{
    color: var(--background-secondary-alt) ;
    font-weight: 600 ;
}

.mod-cta:hover
{
    background-color: var(--interactive-before) ;
    font-weight: 600 ;
}

.CodeMirror-cursor
{
    background-color: var(--vim-cursor) ;
    opacity: 60% ;
}

input.task-list-item-checkbox {
    border: 1px solid var(--faded-blue);
    appearance: none;
    -webkit-appearance: none;
}

input.task-list-item-checkbox:checked
{
    background-color: var(--faded-blue);
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

::selection
{
    background-color: var(--text-selection) ;
}

.mermaid .note
{
    fill: var(--dark3) ;
}

.frontmatter-container {
    display: none;
}

/* Bullet point relationship lines */
.markdown-source-view.mod-cm6 .cm-indent::before,
.markdown-rendered.show-indentation-guide li > ul::before,
.markdown-rendered.show-indentation-guide li > ol::before {
  position: absolute;
  border-right: 1px solid var(--dim-blue);
}