/*
 * RLS Markdown Preview — VS Code
 * Dark-mode optimized
 *
 * Design:
 * - restrained heading colors
 * - strong visual hierarchy
 * - more whitespace BEFORE headings than after
 * - improved tables / blockquotes / inline code
 * - amber emphasis
 */

/* =========================================================
   DOCUMENT
   ========================================================= */

body {
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px 48px 80px;

    font-size: 16px;
    line-height: 1.65;

    color: var(--vscode-editor-foreground);
    background: var(--vscode-editor-background);
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.25;
    font-weight: 650;
}

h1 {
    color: #F1F3F5;
    font-size: 2em;
    margin-top: 1.6em;
    margin-bottom: 0.55em;

    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

h2 {
    color: #8AB4F8;
    font-size: 1.55em;
    margin-top: 1.9em;
    margin-bottom: 0.45em;

    padding-bottom: 0.2em;
    border-bottom: 1px solid rgba(138,180,248,0.20);
}

h3 {
    color: #7FC8C2;
    font-size: 1.30em;
    margin-top: 1.7em;
    margin-bottom: 0.35em;
}

h4 {
    color: #D97AAE;
    font-size: 1.12em;
    margin-top: 1.55em;
    margin-bottom: 0.3em;

    padding-left: 0.55em;
    border-left: 3px solid #D97AAE;
}

h5 {
    color: #8A9DBD;
    font-size: 1.02em;
    margin-top: 1.4em;
    margin-bottom: 0.25em;
}

h6 {
    color: #9AA3AE;
    font-size: 0.90em;
    margin-top: 1.35em;
    margin-bottom: 0.2em;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}


/* =========================================================
   PARAGRAPHS + LISTS
   ========================================================= */

p {
    margin-top: 0.4em;
    margin-bottom: 0.9em;
}

ul, ol {
    margin-top: 0.35em;
    margin-bottom: 0.9em;
}

li {
    margin: 0.18em 0;
}

li::marker {
    color: #8AB4F8;
}


/* =========================================================
   EMPHASIS
   ========================================================= */

strong {
    color: #F2B84B;
    font-weight: 650;
}

em {
    color: #C5CBD3;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: #72A7E8;
    text-decoration: none;
}

a:hover {
    color: #9AC5FF;
    text-decoration: underline;
}


/* =========================================================
   INLINE CODE
   ========================================================= */

:not(pre) > code {
    color: #E7B978;
    background: rgba(255,255,255,0.07);

    padding: 0.12em 0.35em;
    border-radius: 4px;

    font-size: 0.92em;
}


/* =========================================================
   CODE BLOCKS
   ========================================================= */

pre {
    padding: 14px 18px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;

    background: rgba(0,0,0,0.20);
}

pre code {
    font-size: 0.92em;
    line-height: 1.5;
}


/* =========================================================
   BLOCKQUOTES
   ========================================================= */

blockquote {
    margin: 1.1em 0;
    padding: 0.55em 1em;

    color: #BCC4CE;

    border-left: 4px solid #7FC8C2;
    background: rgba(127,200,194,0.07);

    border-radius: 0 5px 5px 0;
}

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;
    margin: 1em 0 1.4em;

    border-collapse: collapse;
    font-size: 0.95em;
}

th {
    color: #DDE5EF;
    font-weight: 650;

    background: rgba(138,180,248,0.10);
}

th, td {
    padding: 8px 12px;

    border: 1px solid rgba(255,255,255,0.12);
}

tr:nth-child(even) {
    background: rgba(255,255,255,0.025);
}

tr:hover {
    background: rgba(138,180,248,0.055);
}


/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

hr {
    height: 1px;
    margin: 2em 0;

    border: none;
    background: rgba(255,255,255,0.16);
}


/* =========================================================
   IMAGES
   ========================================================= */

img {
    max-width: 100%;

    border-radius: 6px;
}


/* =========================================================
   KEYBOARD KEYS
   ========================================================= */

kbd {
    padding: 2px 6px;

    font-size: 0.85em;

    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-bottom-width: 2px;
    border-radius: 4px;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background: rgba(138,180,248,0.28);
}