/* Themes */

:root {
    --color-green-100: #edf2d4;
    --color-green-200: #c8ddac;
    --color-green-300: #9dbf8d;
    --color-green-500: #619867;
    --color-green-700: #476A48;
    --color-green-800: #2e3a2a;
    --color-green-900: #252824;

    --color-red-100: #F2CCE2;
    --color-red-200: #E68AB9;
    --color-red-300: #D54F8A;
    --color-red-500: #C32559;
    --color-red-700: #9B1F3D;
    --color-red-800: #6E1A2B;
    --color-red-900: #4A121E;

    --color-brown-100: #f0ead1;
    --color-brown-300: #d1bea8;
    --color-brown-500: #a98366;
    --color-brown-700: #6b584c;
    --color-brown-900: #3b2e2b;

    --color-gray-100: #f5f5f5;
    --color-gray-300: #cccccc;
    --color-gray-500: #888888;
    --color-gray-700: #444444;
    --color-gray-900: #1a1a1a;

    --color-white: #ffffff;
    --color-black: #000000;

    --color-ll-nam: #1866a4;
    --color-ll-num: #ce4b77;
    --color-ll-str: #19571c;
    --color-ll-rex: #af570f;
    --color-ll-pct: #303030;
    --color-ll-key: #202020;
    --color-ll-com: #575757;

    --const-color-green-100: #edf2d4;
    --const-color-green-200: #c8ddac;
    --const-color-green-300: #9dbf8d;
    --const-color-green-500: #619867;
    --const-color-green-700: #476A48;
    --const-color-green-800: #2e3a2a;
    --const-color-green-900: #252824;

    --const-color-red-100: #F2CCE2;
    --const-color-red-200: #E68AB9;
    --const-color-red-300: #D54F8A;
    --const-color-red-500: #C32559;
    --const-color-red-700: #9B1F3D;
    --const-color-red-800: #6E1A2B;
    --const-color-red-900: #4A121E;

    --const-color-brown-100: #f0ead1;
    --const-color-brown-300: #d1bea8;
    --const-color-brown-500: #a98366;
    --const-color-brown-700: #6b584c;
    --const-color-brown-900: #3b2e2b;

    --const-color-gray-100: #f5f5f5;
    --const-color-gray-300: #cccccc;
    --const-color-gray-500: #888888;
    --const-color-gray-700: #444444;
    --const-color-gray-900: #1a1a1a;

    --const-color-white: #ffffff;
    --const-color-black: #000000;

    --color-ll-nam: #1866a4;
    --color-ll-num: #ce4b77;
    --color-ll-str: #19571c;
    --color-ll-rex: #af570f;
    --color-ll-pct: #303030;
    --color-ll-key: #202020;
    --color-ll-com: #575757;

    --ff-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --ff-serif: serif;
    --ff-mono: 'IBM Plex Mono', monospace;
    --ff-primary: var(--ff-sans);
}

:root[data-theme="system"] .site-theme label[for="site-theme-system"],
:root[data-theme="dark"] .site-theme label[for="site-theme-dark"],
:root[data-theme="light"] .site-theme label[for="site-theme-light"] {
    background: var(--color-green-100);
    color: var(--color-green-900);
}

.font-mono {
    font-family: var(--ff-mono);
}

.font-serif {
    font-family: var(--ff-serif);
}

.font-sans {
    font-family: var(--ff-sans);
}

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
    color: var(--color-black);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    tab-size: 4;
    hyphens: none;
}

pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
}

:not(pre)>code[class*="language-"] {
    white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--color-ll-com);
}

.token.punctuation {
    color: var(--color-ll-pct);
}

.token.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: var(--color-ll-nam);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--color-ll-nam);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: var(--color-ll-rex);
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: var(--color-ll-key);
}

.token.function,
.token.class-name {
    color: #dd4a68;
}

.token.regex,
.token.important,
.token.variable {
    color: var(--color-ll-rex);
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}