:root {
    --base_x:     25, 23, 36;     /* #191724 */
    --base:       rgb(var(--base_x));
    --surface_x:  38, 35, 58;     /* #26233a */
    --surface:    rgb(var(--surface_x));
    --overlay_x:  52, 49, 77;     /* #34314d */
    --overlay:    rgb(var(--overlay_x));
    --muted_x:    110, 106, 134;  /* #6e6a86 */
    --muted:      rgb(var(--muted_x));
    --subtle_x:   144, 140, 170;  /* #908caa */
    --subtle:     rgb(var(--subtle_x));
    --text_x:     224, 222, 244;  /* #e0def4 */
    --text:       rgb(var(--text_x));
    --love_x:     235, 111, 146;  /* #eb6f92 */
    --love:       rgb(var(--love_x));
    --gold_x:     243, 158, 118;  /* #f39e76 */
    --gold:       rgb(var(--gold_x));
    --rose_x:     245, 169, 184;  /* #f5a9b8 */
    --rose:       rgb(var(--rose_x));
    --pine_x:     49, 116, 143;   /* #31748f */
    --pine:       rgb(var(--pine_x));
    --foam_x:     156, 207, 216;  /* #9ccfd8 */
    --foam:       rgb(var(--foam_x));
    --iris_x:     186, 187, 241;  /* #babbf1 */
    --iris:       rgb(var(--iris_x));
    --highlight_x: 70, 69, 99;    /* #464563 */
    --highlight:  rgb(var(--highlight_x));
}


body
{
    --accent-h: 354; /* --red #bf616a */
    --accent-s: 42%;
    --accent-l: 56%;

    --link-decoration:                none;
    --link-decoration-hover:          none;
    --link-external-decoration:       none;
    --link-external-decoration-hover: none;

    --tag-decoration:                 none;
    --tag-decoration-hover:           underline;
    --tag-padding-x:                  .5em;
    --tag-padding-y:                  .2em;
    --tag-radius:                     .5em;

    --tab-font-weight:                600;
    --bold-weight:                    600;

    --checkbox-radius:                0;

    /* --list-indent:                    2em; */

    --embed-border-left: 6px double var(--interactive-accent);
}

.theme-dark
{
    --color-red-rgb:       var(--love_x);
    --color-red:           var(--love);
    --color-orange-rgb:    var(--gold_x);
    --color-orange:        var(--gold);
    --color-yellow-rgb:    var(--gold_x);
    --color-yellow:        var(--gold);
    --color-green-rgb:     var(--pine_x);
    --color-green:         var(--pine);
    --color-cyan-rgb:      var(--foam_x);
    --color-cyan:          var(--foam);
    --color-blue-rgb:      var(--iris_x);
    --color-blue:          var(--iris);
    --color-purple-rgb:    var(--rose_x);
    --color-purple:        var(--rose);

    --background-primary:       var(--base);
    --background-primary-alt:   var(--surface);
    --background-secondary:     var(--surface);
    --background-secondary-alt: var(--overlay);
    --background-modifier-border: var(--highlight);

    --cursor-line-background:   rgba(var(--highlight_x), 0.6);

    --text-normal:   var(--text);
    --text-muted:    var(--subtle);
    --text-faint:    var(--muted);

    --h1-color: var(--love);
    --h2-color: var(--gold);
    --h3-color: var(--pine);
    --h4-color: var(--iris);
    --h5-color: var(--foam);
    --h6-color: var(--rose);

    --text-highlight-bg: var(--highlight);
    --text-highlight-fg: var(--text);

    --text-accent:       var(--iris);
    --text-accent-hover: var(--foam);

    --tag-color:           var(--foam);
    --tag-background:      var(--overlay);
    --tag-background-hover: var(--surface);

    --inline-title-color:  var(--gold);
    --titlebar-text-color-focused: var(--love);
    --bold-color:          var(--gold);
    --italic-color:        var(--foam);

    --checkbox-color:               var(--foam);
    --checkbox-color-hover:         var(--foam);
    --checkbox-border-color:        var(--foam);
    --checkbox-border-color-hover:  var(--foam);
    --checklist-done-color:         rgba(var(--text_x), 0.5);

    --code-normal:     var(--foam);
    --code-background: var(--overlay);

    --table-header-background:       var(--overlay);
    --table-header-background-hover: var(--highlight);
    --table-row-even-background:     var(--surface);
    --table-row-odd-background:      var(--overlay);
    --table-row-background-hover:    var(--highlight);

    --text-selection:      rgba(var(--love_x), 0.3);
    --flashing-background: rgba(var(--love_x), 0.2);

    --icon-color-hover:    var(--love);
    --icon-color-focused:  var(--iris);

    --nav-item-color-hover:  var(--foam);
    --nav-item-color-active: var(--iris);
    --nav-file-tag:          rgba(var(--gold_x), 0.8);

    --graph-line:            var(--highlight);
    --graph-node:            var(--text);
    --graph-node-tag:        var(--love);
    --graph-node-attachment: var(--pine);

    --calendar-hover:                var(--love);
    --calendar-background-hover:     var(--highlight);
    --calendar-week:                 var(--gold);
    --calendar-today:                var(--gold);

    --dataview-key:                  var(--text-muted);
    --dataview-key-background:       rgba(var(--iris_x), 0.2);
    --dataview-value:                var(--text-muted);
    --dataview-value-background:     rgba(var(--love_x), 0.2);

    --tab-text-color-focused-active:         var(--foam);
    --tab-text-color-focused-active-current: var(--love);

}

.theme-light
{
    --color-red-rgb:                 var(--red_x);
    --color-red:                     var(--red);
    --color-purple-rgb:              var(--purple_x);
    --color-purple:                  var(--purple);
    --color-green-rgb:               var(--green_x);
    --color-green:                   var(--green);
    --color-cyan-rgb:                var(--frost1_x);
    --color-cyan:                    var(--frost1);
    --color-blue-rgb:                var(--frost3_x);
    --color-blue:                    var(--frost3);
    --color-yellow-rgb:              var(--yellow_x);
    --color-yellow:                  var(--yellow);
    --color-orange-rgb:              var(--orange_x);
    --color-orange:                  var(--orange);
    /* --color-pink:                    var(--purple); */

    --background-primary:            var(--light3);
    --background-primary-alt:        var(--light3);
    --background-secondary:          var(--light2);
    --background-secondary-alt:      var(--light1);
    --background-modifier-border:    var(--light1);

    --cursor-line-background:        rgba(var(--light0_x), 0.2);

    --text-normal:                   var(--dark2);
    --text-faint:                    var(--dark0);
    --text-muted:                    var(--dark1);

    --h1-color:                      var(--red);
    --h2-color:                      var(--yellow);
    --h3-color:                      var(--green);
    --h4-color:                      var(--purple);
    --h5-color:                      var(--frost0);
    --h6-color:                      var(--frost2);

    --text-highlight-bg:             var(--yellow);
    --text-highlight-fg:             var(--dark0);

    --text-accent:                   var(--orange);
    --text-accent-hover:             var(--frost2);

    --tag-color:                     var(--dark3);
    --tag-background:                var(--light1);
    --tag-background-hover:          var(--light0);

    --titlebar-text-color-focused:   var(--red);

    --inline-title-color:            var(--yellow);

    --bold-color:                    var(--green);
    --italic-color:                  var(--green);

    --checkbox-color:                var(--frost2);
    --checkbox-color-hover:          var(--frost2);
    --checkbox-border-color:         var(--frost2);
    --checkbox-border-color-hover:   var(--frost2);
    --checklist-done-color:          rgba(var(--dark2_x), 0.4);

    --table-header-background:       rgba(var(--light2_x), 0.2);
    --table-header-background-hover: var(--frost2);
    --table-row-even-background:     rgba(var(--light2_x), 0.4);
    --table-row-odd-background:      rgba(var(--light2_x), 0.8);
    --table-row-background-hover:    var(--frost2);

    --text-selection:                rgba(var(--red_x), 0.6);
    --flashing-background:           rgba(var(--red_x), 0.3);

    --code-normal:                   var(--frost1);
    --code-background:               var(--light2);

    --mermaid-note:                  var(--frost0);
    --mermaid-loopline:              var(--frost1);

    --icon-color-hover:              var(--red);
    --icon-color-focused:            var(--frost3);

    --nav-item-color-hover:          var(--red);
    --nav-item-color-active:         var(--frost2);
    --nav-file-tag:                  rgba(var(--orange_x), 0.9);

    --graph-line:                    var(--light0);
    --graph-node:                    var(--dark3);
    --graph-node-tag:                var(--red);
    --graph-node-attachment:         var(--green);

    --calendar-hover:                var(--red);
    --calendar-background-hover:     var(--light0);
    --calendar-week:                 var(--orange);
    --calendar-today:                var(--orange);

    --dataview-key:                  var(--text-faint);
    --dataview-key-background:       rgba(var(--frost2_x), 0.3);
    --dataview-value:                var(--text-faint);
    --dataview-value-background:     rgba(var(--red_x), 0.3);

    --tab-text-color-focused-active:         var(--frost2);
    --tab-text-color-focused-active-current: var(--red);
}

table
{
    border: 1px solid var(--background-secondary) !important;
    border-collapse: collapse;
}

thead
{
    border-bottom: 2px solid var(--background-modifier-border) !important;
}
  
th
{
    font-weight: 600 !important;
    border: 1px solid var(--background-secondary) !important;
}

td
{
    border-left: 1px solid var(--background-secondary) !important;
    border-right: 1px solid var(--background-secondary) !important;
    border-bottom: 1px solid var(--background-secondary) !important;
}

.markdown-rendered tbody tr:nth-child(even)
{
    background-color: var(--table-row-even-background) !important;
}

.markdown-rendered tbody tr:nth-child(odd)
{
    background-color: var(--table-row-odd-background) !important;
}

.markdown-rendered tbody tr:nth-child(even):hover,
.markdown-rendered tbody tr:nth-child(odd):hover
{
    background-color: var(--table-row-background-hover) !important;
}

.markdown-rendered mark
{
    background-color: var(--text-highlight-bg) !important;
    color: var(--text-highlight-fg) !important;
}

.markdown-rendered mark a
{
    color: var(--red) !important;
    font-weight: 600;
}

.search-result-file-matched-text
{
    color: var(--text-highlight-fg) !important;
}

.cm-hashtag-begin:hover, .cm-hashtag-end:hover
{
    color: var(--text-accent);
    /* background-color: var(--tag-background-hover); */
    text-decoration: underline;
}

input[type=checkbox]
{
    border: 1px solid var(--checkbox-color);
}

input[type=checkbox]:checked
{
    background-color: var(--checkbox-color);
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

input[type=checkbox]:checked:after
{
    display: none;
}

code[class*="language-"],
pre[class*="language-"]
{
    line-height: var(--line-height-tight) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight
{
    color: var(--text-highlight-fg) !important;
}

/* Keep inline code the same between viewer and editor. */
.cm-inline-code
{
    border-radius: var(--radius-s);
    font-size: var(--code-size);
    padding: 0.1em 0.25em;
}

.cm-formatting-code + .cm-inline-code
{
    border-radius: 0;
    padding: 0.1em 0;
}

.cm-formatting-code
{
    border-radius: var(--radius-s) 0 0 var(--radius-s);
    padding: 0.1em 0 0.1em 0.25em;
}

.cm-inline-code + .cm-formatting-code
{
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    padding: 0.1em 0.25em 0.1em 0;
}

/* Keep list bullet padding the same between viewer and editor. */
.cm-formatting-list
{
    padding-right: 4px !important;
}

/*
 * Keep sub-list indenting the same between viewer and editor.
 * This assumes --list-indent is default at 2em.
 */
/*
.cm-indent 
{
    text-indent: 1em !important;
}
*/

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

.calendar .week-num
{
    color: var(--calendar-week) !important;
}

.mermaid .loopLine
{
    stroke: var(--mermaid-loopline) !important;
}

.calendar .today
{
    color: var(--calendar-today) !important;
}

.calendar .week-num:hover,
.calendar .day:hover
{
    color: var(--calendar-hover) !important;
    background-color: var(--calendar-background-hover) !important;
}

.markdown-embed-title
{
    color: var(--yellow);
    font-weight: 600 !important;
}

.cm-active
{
    background-color: var(--cursor-line-background) !important;
}

.nav-file-tag
{
    color: var(--nav-file-tag) !important;
}

.is-flashing
{
    background-color: var(--flashing-background) !important;
}

.dataview.inline-field-key
{
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: var(--radius-s);
    padding-left: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    color: var(--dataview-key) !important;
    background-color: var(--dataview-key-background) !important;
}

.dataview.inline-field-value
{
    border-top-right-radius: var(--radius-s);
    border-bottom-right-radius: var(--radius-s);
    padding-right: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    color: var(--dataview-value) !important;
    background-color: var(--dataview-value-background) !important;
}

.suggestion-highlight
{
    color: var(--red);
}

