/* ==================== secondary color ==================== */
:root {
	--color-secondary: #454a57;
    --color-secondary-dark-1: #505665;
    --color-secondary-dark-2: #5b6273;
    --color-secondary-dark-3: #71798e;
    --color-secondary-dark-4: #7f8699;
    --color-secondary-dark-5: #8c93a4;
    --color-secondary-dark-6: #9aa0af;
    --color-secondary-dark-7: #a8adba;
    --color-secondary-dark-8: #b6bac5;
    --color-secondary-dark-9: #c4c7d0;
    --color-secondary-dark-10: #d2d4db;
    --color-secondary-dark-11: #dfe1e6;
    --color-secondary-dark-12: #edeef1;
    --color-secondary-dark-13: #fbfbfc;
    --color-secondary-light-1: #373b46;
    --color-secondary-light-2: #292c34;
    --color-secondary-light-3: #1c1e23;
    --color-secondary-light-4: #0e0f11;
    --color-secondary-alpha-10: #454a5719;
    --color-secondary-alpha-20: #454a5733;
    --color-secondary-alpha-30: #454a574b;
    --color-secondary-alpha-40: #454a5766;
    --color-secondary-alpha-50: #454a5780;
    --color-secondary-alpha-60: #454a5799;
    --color-secondary-alpha-70: #454a57b3;
    --color-secondary-alpha-80: #454a57cc;
    --color-secondary-alpha-90: #454a57e1;
}

/* ==================== secondary color ==================== */
:root {
	--color-red: #db2828;
    --color-orange: #f2711c;
    --color-yellow: #fbbd08;
    --color-olive: #b5cc18;
    --color-green: #21ba45;
    --color-teal: #00b5ad;
    --color-blue: #2185d0;
    --color-violet: #6435c9;
    --color-purple: #a333c8;
    --color-pink: #e03997;
    --color-brown: #a5673f;
    --color-grey: #767a85;
    --color-black: #1e222e;
    --color-gold: #a1882b;
    --color-white: #ffffff;
}

/* ==================== diff colors ==================== */
:root {
	--color-diff-removed-word-bg: #6f3333;
    --color-diff-added-word-bg: #3c653c;
    --color-diff-removed-row-bg: #3c2626;
    --color-diff-moved-row-bg: #818044;
    --color-diff-added-row-bg: #283e2d;
    --color-diff-removed-row-border: #634343;
    --color-diff-moved-row-border: #bcca6f;
    --color-diff-added-row-border: #314a37;
    --color-diff-inactive: #353846;
}

/* ==================== notification colors ==================== */
:root {
	/* error */
	--color-error-border: #a53a37;
    --color-error-bg: #482c2c;
    --color-error-text: #ff4433;

	/* success */
    --color-success-border: #458a57;
    --color-success-bg: #284034;
    --color-success-text: #6cc664;

	/* warning */
    --color-warning-border: #bb9d00;
    --color-warning-bg: #3a3a30;
    --color-warning-text: #fbbd08;

	/* information */
    --color-info-border: #306090;
    --color-info-bg: #26354c;
    --color-info-text: #38a8e8;
}

/* ==================== light text ==================== */
:root {
	--color-text-light: #a6aab5;
    --color-text-light-2: #8a8e99;
    --color-text-light-3: #707687;
}

/* ==================== syntax highlighting ==================== */
:root {
	--color-timeline: #4c525e;
    --color-input-text: #d5dbe6;
	--color-input-border-hover: #505667;
    --color-navbar-transparent: #2a2e3a00;
    --color-light: #00000028;
    --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
    --color-light-border: #ffffff28;
    --color-hover: #ffffff10;
    --color-active: #ffffff16;
	--color-markup-table-row: #ffffff06;
    --color-markup-code-block: #292d39;
    --color-button: #353846;
	--color-code-sidebar-bg: #2e323e;
    --color-shadow: #00000060;
    --color-secondary-bg: #2a2e3a;
    --color-text-focus: #fff;
    --color-expand-button: #3c404d;
    --color-placeholder-text: #6a737d;
    --color-editor-line-highlight: var(--color-primary-light-5);
    --color-project-board-bg: var(--color-secondary-light-2);
    --color-caret: var(--color-text);
    --color-reaction-bg: #ffffff12;
	--color-reaction-active-bg: var(--color-primary-alpha-40);
}

/* ==================== syntax highlighting ==================== */
/* current line */
.chroma .hl {
	background-color: #3F424D;
}

/* generic prompt */
.chroma .gp {
	color: #555;
}

/* literals */
.chroma .dl,
.chroma .il,
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo,
.chroma .s, .chroma .sa, .chroma .sc, .chroma .sh {
	color: #89D3FB;
}

/* keywords */
.chroma .kp,
.chroma .ow {
	color: #5F8700;
}

/* comments */
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
.chroma .sd {
	color:#ABB1B7;
}

/* line numbers */
.chroma .ln, .chroma .lnt, .lines-num {
	color: #7F7F7F;
}

/* active line */
.lines-code.active, .lines-code .active {
    background-color: var(--color-primary-alpha-60) !important;
    color: var(--color-text) !important;
}

/* generic output */
.chroma .go {
	color: #888;
}

/* name attribute */
.chroma .na {
	color: #BBB;
}

/* comment special */
.chroma .cs {
	color: #C69CD0;
}

/* literal string regex */
.chroma .sr {
	color: #97c;
}

/* names */
.chroma .bp,
.chroma .gu,
.chroma .kd, .chroma .kt,
.chroma .nb, .chroma .nd, .chroma .nf, .chroma .nt, .chroma .nv, .chroma .nx {
	color: #9DACCC;
}

/* literal strings */
.chroma .s1, .chroma .s2, .chroma .sb {
	color: #A0CC75;
}

/* name exception */
.chroma .ne {
	color: #AF8700;
}

/* whitespace characters */
.chroma .w {
	color: #bbb;
}

/* generic emphasis */
.chroma .ge {
	color: #EF5;
}

/* generic error */
.chroma .gr {
	color: #FF8A8A;
}

/* misc keywords */
.chroma .gt,
.chroma .k, .chroma .kr,
.chroma .o,
.chroma .se {
	color: #FF9E7D;
}

/* name variable class */
.chroma .vc {
	color: #FFB76F;
}

/* keywords, names, literals */
.chroma .gh,
.chroma .kc, .chroma .kn,
.chroma .nc, .chroma .ni, .chroma .nl, .chroma .nn, .chroma .no,
.chroma .si, .chroma .ss, .chroma .sx,
.chroma .vg, .chroma .vi {
	color: #FFD482;
}

/* comment preproc */
.chroma .cp {
	color: #FC6;
}

/* generic inserted */
.chroma .gi {
	color:#fff;
	background-color:#3a523a;
}

/* generic deleted */
.chroma .gd {
	color:#fff;
	background-color:#5f3737;
}

.cm-property {
color: #a0cc75;
}

.cm-header {
color: #9daccc;
}

.cm-quote {
color: #009900;
}

.cm-keyword {
color: #cc8a61;
}

.cm-atom {
color: #ef5e77;
}

.cm-number {
color: #ff5656;
}

.cm-def {
color: #e4e4e4;
}

.cm-variable-2 {
color: #00bdbf;
}

.cm-variable-3 {
color: #008855;
}

.cm-comment {
color: #8e9ab3;
}

.cm-string {
color: #a77272;
}

.cm-string-2 {
color: #ff5500;
}

.cm-meta,
.cm-qualifier {
color: #ffb176;
}

.cm-builtin {
color: #b7c951;
}

.cm-bracket {
color: #999977;
}

.cm-tag {
color: #f1d273;
}

.cm-attribute {
color: #bfcc70;
}

.cm-hr {
color: #999999;
}

.cm-url {
color: #c5cfd0;
}

.cm-link {
color: #d8c792;
}

.cm-error {
color: #dbdbeb;
}