/* ⚠️ Considering in Chinese language, there is no 'italic' style literally, */
/* I did some tricks on font-style that, while formatting with italic styles, English letters are italic and Chinese are just a kind of serif. */
/* … as you can see in --font-italic. */
/* If you come into any problems with that, just remove the 'font-style: normal' in Emphasis part.  */

:root {

  /* Fonts */
  --font-monospace: 'Andale Mono', Menlo, Monaco, 'Courier New', monospace !important;
  --font-italic: Baskerville-Italic, 'Snell Roundhand', Times-Italic, Didot-Italic, Baskerville, Didot, 'Times New Roman', 'Source Han Serif CN', 'Adobe Song Std', STSong, 'Song Ti SC', serif !important;

  /* Gray Scales */
  --gray-900: #202B31;
  --gray-800: #303D44;
  --gray-700: #425157;
  --gray-600: #56656A;
  --gray-500: #6C797D;
  --gray-400: #869297;
  --gray-300: #A0ACB0;
  --gray-200: #BCC6CA;
  --gray-100: #D9E0E3;
  --white: #F9FBFD;
  --white-greeny: #F2F8FA;

  /* Blue Scales */
  --blue-900: #273c4a;
  --blue-800: #2e5067;
  --blue-700: #326382;
  --blue-600: #2f7eab;
  --blue-500: #248FC8;
  --blue-400: #3A9ECF;
  --blue-300: #51ACD6;
  --blue-200: #69BBDD;
  --blue-100: #BAE4F1;

  /* Red Scales */
  --red-500: #c75353;
  --red-400: #D8696A;
  --red-300: #E68284;
  --red-200: #F9BDC0;
}


.theme-light{
  --background-primary: var(--white);
  --background-primary-alt: var(--white);
  --background-code-selected: var(--blue-600);
  --background-tag: var(--blue-500);
  --background-tag-hover: var(--blue-400);
  --background-tag-active: var(--blue-600);
  /* --background-secondary: # */
  /* --background-secondary-alt: # */
  /* --background-accent: # */
  /* --background-modifier-border: # */
  /* --background-modifier-form-field: # */
  /* --background-modifier-form-field-highlighted: # */
  /* --background-modifier-box-shadow: rgba( */
  /* --background-modifier-success: # */
  /* --background-modifier-error: # */
  /* --background-modifier-error-rgb: */
  /* --background-modifier-error-hover: # */
  /* --background-modifier-cover: rgba( */
  /* --text-accent: # */
  /* --text-accent-hover: # */
  --text-header: var(--gray-700);
  --text-normal: var(--gray-800);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-200);
  --text-hashtag: var(--red-300);
  --ul-marker: var(--blue-600);
  --text-code: var(--red-500);
  --text-code-selected: var(--white);
  --text-tag: var(--white-greeny);
  --text-tag-hover: var(--white);
  --text-accent: var(--blue-600);
  --text-accent-hover: var(--blue-300);
  --text-error: var(--red-400);
  --text-error-hover: var(--red-200);
  --text-highlight-bg: rgba(249, 189, 192, 0.3);
  --text-selection: var(--blue-100);
  /* --text-on-accent: # */
  /* --interactive-normal: # */
  /* --interactive-hover: # */
  --interactive-accent: var(--blue-400);
  --interactive-accent-rgb: var(--blue-400);
  --interactive-accent-hover: var(--blue-400);
  /* --scrollbar-active-thumb-bg: rgba( */
  /* --scrollbar-bg: rgba( */
  /* --scrollbar-thumb-bg: rgba( */

}


/* Status Bar */
.status-bar {
  background-color: var(--blue-600);
  color: var(--white);
}


/* Editor Global */
.CodeMirror-lines,
.markdown-preview-sizer{
  font-size: 20px;
  line-height: 1.8;
}

.markdown-source-view.is-readable-line-width .CodeMirror{
  max-width: 50rem;
}

.markdown-source-view {
  font-family: SF Pro Display, PingFangSC-Light, graphik-normal-300, PingFang-SC-W3, 'Segoe UI', Roboto, 'Microsoft YaHei UI', 'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .7px;
}

.markdown-preview-view {
  font-family: SF Pro Display, PingFangSC-Thin, graphik-normal-300, PingFang-SC-W3, 'Segoe UI', Roboto, 'Microsoft YaHei UI', 'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: .8px;
}


/* :Paragraphs */
.CodeMirror-line > span, 
.markdown-preview-section p {
  color: var(--text-normal);
}


/* :Headers */
.cm-header,h1,h2,h3,h4,h5,h6 {
  color: var(--text-header);
  line-height: 2 !important;
  font-family: SF Pro Display, PingFangSC-Medium, graphik-normal-300, PingFang-SC-W3, 'Segoe UI', Roboto, 'Microsoft YaHei UI', 'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cm-header-1,
.markdown-preview-section h1{
  font-size: 40px;
}

.cm-header-2,
.markdown-preview-section h2{
  font-size: 32px;
}

.cm-header-3,
.markdown-preview-section h3{
  font-size: 26px;
}

.cm-header-4,
.markdown-preview-section h4{
  font-size: 22px;
  color: var(--text-muted);
}

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

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

.cm-formatting-header {
  font-size: 14px;
  color: var(--text-hashtag);
}


/* :Emphasis */
.markdown-preview-section em,
.cm-em {
  font-family: var(--font-italic);
  font-weight: 400;
  font-style: normal;
  /* font-style: italic; */
}

.markdown-preview-section em{
  font-style: normal;
  /* font-style: italic; */
}

.markdown-preview-section em>strong,
.cm-em.cm-strong {
  font-family: Baskerville-SemiboldItalic, 'Snell Roundhand-Bold', Times-BoldItalic, Didot-Italic, Baskerville, Didot, 'Times New Roman', 'Source Han Serif CN', 'Adobe Song Std', STSong, 'Song Ti SC', serif;
  color: #000;
}

.cm-formatting-em,
.cm-formatting-strong.cm-strong {
  color: var(--text-faint);
  font-size: 14px;
}

.markdown-preview-section strong,
.cm-strong {
  color: var(--gray-900);
  font-family: SF Pro Display, PingFangSC-Regular, graphik-normal-300, PingFang-SC-W3, 'Segoe UI', Roboto, 'Microsoft YaHei UI', 'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  /* font-style: bold; */
}

/* :Horizons */
.markdown-preview-section hr {
  height: .4px;
  width: 20vw;
  margin: 64px auto;
  color: var(--gray-900);
}

.cm-s-obsidian span.cm-hr {
  color: var(--text-muted);
  letter-spacing: .5rem;
  font-size: 12px;
}


/* :Lists */
.cm-s-obsidian pre.HyperMD-list-line {
  padding: 0 4px;
}

pre[class*="HyperMD-list-line-"] span.cm-formatting-list.cm-formatting-list-ul{
  margin-right: 10px;
  color: var(--ul-marker);
  font-size: 12px;
}

pre[class*="HyperMD-list-line-1"] span.cm-formatting-list.cm-formatting-list-ul.cm-list-1 {
  margin-right: 8px;
  font-size: 18px;
}

.markdown-preview-view li li,
pre[class*="HyperMD-list-line-"] span:not(.cm-formatting){
  color: var(--gray-700);
  font-size: 18px;
}

pre[class*="HyperMD-list-line-1"] span:not(.cm-formatting){
  color: var(--text-normal);
  font-size: 20px;
}

pre[class*="HyperMD-list-line-2"] span:not(.cm-formatting){
  font-size: 19px;
}

.markdown-preview-section li {
  line-height: 2.2;
}


/* :Images */
.markdown-preview-section .internal-embed{
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.markdown-preview-section img {
  max-width: 62%;
}


/* :Links */
.cm-formatting.cm-link,
.cm-s-obsidian span.cm-formatting.cm-url {
  color: var(--text-faint);
  font-size: 19px;
}
.cm-s-obsidian span.cm-url {
  text-decoration: none;
  font-weight: 300;
  font-size: 18.5px;
  color: var(--gray-500);
}

.cm-s-obsidian span.cm-url:hover {
  color: var(--gray-400);
  cursor: pointer;
}

.cm-s-obsidian span.cm-link:not(.cm-formatting) {
  color: var(--text-accent) !important;
}

.markdown-preview-section a,
.markdown-preview-section a:hover,
.markdown-preview-section a:active,
.markdown-preview-section .internal-link:not(.cm-strikethrough) {
  text-decoration: none;
}


/* :Blockquotes */
.cm-s-obsidian span.cm-formatting-quote {
  color: var(--text-accent);
}

.cm-quote {
  font-family: var(--font-italic);
  letter-spacing: 0.4px;
  font-weight: 400;
}

.markdown-preview-section blockquote {
  font-family: var(--font-italic);
  border: none;
  border-left: 0.5px solid var(--text-faint);
  margin: 3rem 0;
}

.markdown-preview-section blockquote>p{
  color:  var(--text-accent);
  margin-top: 1.2rem;
}

.markdown-preview-section blockquote>p:first-of-type{
  margin-top: 0;
}

.markdown-preview-section blockquote>p::selection {
  background-color: var(--background-code-selected);
  color: var(--text-code-selected) !important;
}


/* :Escape Backslash */
.cm-s-obsidian span.cm-hmd-escape-backslash{
  color: var(--text-faint);
}


/* :Inline Codes */
.cm-s-obsidian span.cm-inline-code.cm-formatting-code{
  color: var(--text-faint);
} 

.markdown-preview-section code,
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting){
  color: var(--text-code);
  font-family: var(--font-monospace);
  font-size: 17px;
  margin: 0 3px;
}

.markdown-preview-section code::selection {
  background-color: var(--background-code-selected);
  color: var(--text-code-selected) !important;
}


/* :Code Blocks */
.markdown-preview-section code[class*="language-"],
.cm-hmd-codeblock {
  line-height: 1.8;
}
.markdown-preview-section pre[class*="language-"] {
  background-color: var(--background-primary-alt);
}
.markdown-preview-section .token.operator {
  background-color: inherit;
}

/* :Task List */
.markdown-preview-view .task-list-item-checkbox {
  top: -2px;
  cursor: pointer;
}

input[type="checkbox" i]:checked {
  color: #202B31;
}



/* :Tables */


/* :Strikethrough */
.cm-strikethrough,
.markdown-preview-section s {
  text-decoration-color: var(--gray-600);
}
.cm-formatting.cm-strikethrough {
  text-decoration: none;
  font-size: 14px;
  color: var(--text-faint);
}

.cm-s-obsidian span.cm-hmd-internal-link.cm-strikethrough {
  text-decoration: line-through;
}


/* :Footnotes */
.markdown-preview-section .footnote-link {
  font-size: 14px;
}
.markdown-preview-section .footnote-backref {
  color: var(--text-accent);
} 
.markdown-preview-section .footnote-backref:hover {
  color: var(--text-accent-hover);
} 
.markdown-preview-section section.footnotes {
  font-family: var(--font-italic);
}


/* :Maths */
.cm-s-obsidian span.cm-math {
  font-family: var(--font-monospace);
  font-size: 18px;
  font-style: normal;
}

.cm-s-obsidian span.cm-formatting-math {
  color: var(--text-faint);
}


/* :Highlights */
.markdown-preview-section mark {
  padding: 0 2px;
}

.cm-s-obsidian span.cm-highlight.cm-formatting {
  color: var(--text-muted);
}

.cm-highlight:not(.cm-formatting) {
  padding: 0 2px;
}


/* :Internal Links */
.cm-hmd-internal-link {
  cursor: pointer;
}
.cm-s-obsidian span.cm-hmd-internal-link{
  color: var(--text-accent) !important;
}
.cm-s-obsidian span.cm-hmd-internal-link:hover{
  text-decoration: none;
  color: var(--text-accent-hover);
}
.cm-formatting-link {
  color: var(--text-faint) !important;
}


/* :Internal Embeds */


/* :Checkboxes */


/* :Tags */
.cm-s-obsidian span.cm-hashtag-begin{
  font-size: 16px;
  color: var(--text-accent);
}

.cm-s-obsidian span.cm-hashtag-end,
.markdown-preview-section a.tag {
  color: var(--text-tag) !important;
  border-radius: 8px;
  background-color: var(--background-tag);
  padding: 1px 12px;
  margin-right: 12px; 
}

.cm-s-obsidian span.cm-hashtag-end:hover,
.markdown-preview-section a.tag:hover{
  background-color: var(--background-tag-hover);
  color: var(--text-tag-hover);
}

.cm-s-obsidian span.cm-hashtag {
  text-decoration: none;
  cursor: pointer;
}


/* Workspace */

/* :Global */
.workspace-leaf-resize-handle:hover {
  background-color: var(--blue-100);
}

.workspace-ribbon {
  background-color: var(--blue-800);
}

.side-dock-ribbon-action:hover,
.workspace-ribbon-collapse-btn:hover {
  color: var(--blue-300);
}

.side-dock-ribbon.mod-left.is-collapsed + .workspace-split.mod-left-split{
  min-width: 0rem;
}

/* :Header Dragger */
.view-header-icon:hover {
  color: var(--text-normal);
}

/* :Change Size */
.workspace-tab-container-inner {
  font-size: 16px;
}

/* :Nav */
.nav-folder-title:hover .nav-folder-collapse-indicator svg{
  color: var(--text-accent-hover);
}

/* :Header Dragger */
.mod-pin-leaf.is-active {
  color: var(--red-400);
}


/* Graph View

/* :background of graph view pane */
.workspace-leaf-content[data-type = "graph"] .view-content{
  background-color: var(--background-primary);
}

/* :filled color for the circle when not hover */
.graph-view.color-fill {
  color: var(--text-accent);
}

/* :color for the circle stroke */
.graph-view.color-circle {
  color: var(--gray-100);
}

/* :color for the connecting line when not hover */
.graph-view.color-line {
  color: var(--gray-100);
}

/* :color for texts */
.graph-view.color-text {
  color: var(--text-normal);
}

/* :filled color for the circle when hover */
.graph-view.color-fill-highlight {
  color: var(--interactive-accent);
}

/* :color for the connecting line when hover */
.graph-view.color-line-highlight {
  color: var(--blue-200);
}