@import "./autumnus.css";
@import "./snippet/a-dark-code.css";

:root {
    /* color setting */
    --theme-color: hsl(100, 100%, 75%);
    --theme-color-weak: hsl(0, 0%, 10%);
    --theme-color-weaker: hsl(0, 0%, 15%);;
    --color-text: hsl(0, 0%, 80%);
    --color-em: hsl(0, 0%, 90%);
    --color-strong: hsl(0, 0%, 95%);
    --color-weak: hsl(0, 0%, 65%);
    --color-weakest: hsl(0, 0%, 50%);
    --md-char-color: var(--theme-color);
    --meta-content-color: var(--color-weakest);
    --color-title: var(--color-em);
    --color-title-h1: var(--color-em);
    --color-title-h2: var(--color-em);
    --color-title-h3: var(--color-em);
    --color-title-h4: var(--color-em);
    --color-title-h5: var(--color-em);
    --color-title-h6: var(--color-em);
    --mermaid-theme: dark;

    --color-quote: var(--color-weak);
    --color-code: var(--color-text);
    --color-link: var(--theme-color);
    --color-italic: var(--color-em);
    --color-strong: var(--color-strong);
    --color-highlight: var(--color-weakest);
    --color-strike: var(--color-weakest);
    --color-footnote: var(--color-weak);

    --thead-color: var(--color-em);
    --tbody-color: var(--color-text);
    --tbody-color-opt: var(--color-text);
    --color-thead-hover: var(--color-weak);
    --color-tbody-hover: var(--color-weak);

    --link-hover-color: var(--theme-color);
    --link-hover-bg: none;

    /* background setting */
    --bg-contents: var(--theme-color-weaker);
    --bg-write: hsl(205, 10%, 20%);
    --bg-title: none;
    --bg-title-h1: none;
    --bg-title-h2: none;
    --bg-title-h3: none;
    --bg-title-h4: none;
    --bg-title-h5: none;
    --bg-title-h6: none;

    --bg-quote: hsl(200, 20%, 18%);
    --bg-code: hsl(200, 20%, 18%);
    --bg-code-block: hsl(200, 20%, 18%);
    --bg-link: none;
    --bg-italic: none;
    --bg-strong: none;
    --bg-highlight: hsl(100, 100%, 85%);
    --bg-strike: none;
    --bg-footnote: none;

    --bg-thead: var(--theme-color-weak);
    --bg-tbody: var(--theme-color-weaker);
    --bg-tbody-opt: hsl(0, 0%, 25%);
    --bg-thead-hover: var(--bg-contents);
    --bg-tbody-hover: var(--bg-contents);

    /* font setting:font-weight;font-size;line-height;font-family */

    --font-weight: 400;
    --font-size: 1rem;
    --line-height: 2rem;
    --font-family: var(--font-hei);

    --text-font: 400 1rem/1.5rem var(--font-hei);
    --text-font-size: 1rem;
    --font-title: var(--font-song);
    --font-title-h1: 900 3rem/4.5rem var(--font-title);
    --font-title-h2: 800 2.5rem/3.75rem var(--font-title);
    --font-title-h3: 600 2rem/3rem var(--font-hei);
    --font-title-h4: 600 1.75rem/2.625rem var(--font-hei);
    --font-title-h5: 600 1.5rem/2.25rem var(--font-hei);
    --font-title-h6: 600 1.5rem/2.25rem var(--font-hei);

    --font-quote: 400 1.25rem/1.875rem var(--font-kai);
    --font-code: 400 0.9rem/1.35rem var(--font-mono);
    --font-footnote: 400 1.1rem/1.65rem var(--font-kai);

    /* margin setting:top;right;bottom;left */
    --margin-h1: 6rem auto 4rem;
    --margin-h2: 4rem auto 2rem;
    --margin-h3: 2rem auto 1rem;
    --margin-h4: 2rem auto 1rem;
    --margin-h5: 2rem auto 1rem;
    --margin-h6: 2rem auto 1rem;

    --margin-text: 1rem auto;
    --margin-block: 1.5rem auto;

    /* padding-setting */
    --padding-text: 1px 4px;
    --padding-block: 1rem;

    /* border setting */
    --base-border: 1px solid var(--theme-color);
    --thin-border: 1px solid hsl(100, 100%, 65%);
    --thick-border: 4px solid hsl(100, 100%, 65%);
    --divide-border: 1px solid #0d0d0d;
    --dashed-border: 1px dashed #4d97ff;
    --dashed-border-opt: 1px dashed hsl(100, 100%, 65%);

    /* box-shadow */
    --text-shadow: none;
    --block-shadow: 0px 20px 40px 1px hsla(0, 0%, 0%, 0.3);
    --block-shadow-opt: var(var(--block-shadow));
    --block-shadow-weak: 0 8px 16px 0 #b3b3b333;
    --block-shadow-strong: #00000033 0px 25px 56px 0px, #0000001a 0px 5px 15px 0px;

    /* ui setting */
    --blur-text-color: var(--theme-color);
    --active-file-bg-color: hsl(0, 0%, 1%);
    --active-file-text-color: var(--theme-color);
    --active-file-border-color: var(--theme-color);
    --side-bar-bg-color: var(--theme-color-weaker);
    --item-hover-bg-color: var(--theme-color-weak);
    --item-hover-text-color: inherit;

    --primary-color: var(--theme-color);
    --primary-btn-border-color: var(--theme-color);
    --primary-btn-text-color: hsl(0, 0%, 0%);

    --select-text-bg-color: var(--theme-color);
    --select-text-font-color: hsl(0, 0%, 0%);
    --active-bg: hsl(0, 0%, 5%);
    --rawblock-edit-panel-bd: #9b9b9b1f;
    --mermaid-arrow-color:var(--theme-color);
    --control-text-color: var(--color-text);
}

/* bugfix */

blockquote code {
    background: #333;
}

#write pre.md-fences {
    border: 1px solid #9993;
    border-top: 2rem solid var(--bg-code-block);
}

.cm-s-inner .CodeMirror-cursors,
.CodeMirror div.CodeMirror-cursor {
    background-color: var(--theme-color) !important;
    border-left: 2px solid var(--theme-color) !important;
    width: 2px !important;
}

::-webkit-scrollbar-thumb {
    background: #63636380;
    background-clip: padding-box;
}