:root {
    color-scheme: light dark;

    /* デバッグ用 */
    /* color-scheme: light; */
    /* color-scheme: dark; */

    --icon-green: #80A4AE;
    --icon-green-light: #98B5BE;

    --app-white: #E0E0E0;
    --app-gray: #434343;

    --main-back: #222;
    --main-back-translucent: rgb(from var(--main-back) r g b / 0.93);
    --highlight-main: light-dark(#0895b1, var(--icon-green-light));
    --highlight-link: light-dark(#086D7D, var(--icon-green-light));
    --highlight-back: rgb(from var(--highlight-link) r g b / 0.2);
    --text-front: light-dark(var(--app-gray), var(--app-white));
    --text-middle: color-mix(in srgb, var(--app-white), var(--app-gray));
    --text-back: light-dark(var(--app-white), var(--app-gray));

    /* コントラスト確認 */
    /* https://app.contrast-finder.org/ */
}

/* デバッグ用 */
/* @media (min-aspect-ratio: 9/5) {
    :root {
        color-scheme: dark;
        color-scheme: light;
    }
} */

a:link {
    color: var(--highlight-link);
    font-weight: bold;
}

a:visited {
    color: var(--highlight-link);
}

body {
    color: var(--highlight-main);
    background-color: var(--main-back);
}

code {
    color: var(--text-front);
    background-color: var(--highlight-back);
}

blockquote {
    color: var(--text-front);
    background-color: var(--highlight-back);
}

:is(table, th, td) {
    border-color: var(--text-front);
}

hr {
    color: var(--text-middle);
    background-color: var(--text-middle);
}

.header {
    background-color: var(--main-back-translucent);

    a {
        color: var(--highlight-main);
        text-decoration: none;
        font-weight: normal;
    }
}

.article {
    color: var(--text-front);
    background-color: var(--text-back);

    /* タイトルの装飾を剥がす */
    a.title {
        color: var(--text-front);
        text-decoration: none;
        font-weight: normal;
    }

    /* リンク内の<b>タグの文字色を変える */
    a b {
        color: var(--text-front);
    }
}