:root {
    --hera-main-color: #8b645a;
    --hera-hover-color: #8b645a;
    --hera-color-white: #fff;
    --hera-background-white: #fff;
    --hera-background-gray: #f5f5f5;
    --hera-background-gray-lightest: #fafafa;
    --hera-warning-color: rgb(201, 74, 74);

    --hera-column-width: 742px;
    --hera-article-width: 828px;
    --hera-header-width: 25%;

    --hera-basic-font-size: 16px;
    --hera-text-color: rgba(0, 0, 0, 0.86);
    --hera-text-light: rgba(0, 0, 0, 0.68);
    --hera-text-gray: rgba(0, 0, 0, 0.6);
    --hera-text-gray-lightest: rgba(0, 0, 0, 0.55);

    --hera-border-color: rgba(0, 0, 0, 0.1);
    --hera-border-color-light: rgba(0, 0, 0, 0.05);

    --hera-background-color-white: #fff;
    --hera-background-opacity: 1;
    --hera-article-hero-font-size: 2rem;

    --hera-border-radius: 999rem;

    --hera-thumbnail-width: 96px;
    --hera-thumbnail-height: 96px;

    --hera-font-size-smallest: 12px;
    --hera-text-size-small: 14px;
}

@media (prefers-color-scheme: dark) {
    .auto {
        // --hera-main-color: rgba(253, 186, 116, 1);
        // --hera-hover-color: rgba(255, 237, 213, 1);
        --hera-text-color: #a1a1aa;
        --hera-text-light: rgba(161, 161, 170, 1);
        --hera-text-gray: rgba(113, 113, 122, 1);
        --hera-text-gray-lightest: rgba(113, 113, 122, 0.95);

        --hera-background-white: #1e1e1e;
        --hera-background-gray: #000;
        --hera-background-white-opacity: rgba(
            30,
            30,
            30,
            var(--hera-background-opacity)
        );
        --hera-background-gray-lightest: #121212;

        --hera-border-color: rgba(63, 63, 70, 0.6);
        --hera-border-color-light: rgba(63, 63, 70, 0.4);

        .comment-form .submit {
            background-color: rgba(63, 63, 70, 1);
            &:hover {
                background-color: rgba(82, 82, 91, 1);
            }
        }

        .doulist-item {
            background-color: rgba(63, 63, 70, 0.15);
        }

        .comment-form {
            input,
            textarea {
                background-color: rgba(63, 63, 70, 0.15);
                border-color: rgba(63, 63, 70, 1);
            }
        }
    }
}

.dark {
    --hera-text-color: #a1a1aa;
    --hera-text-light: rgba(161, 161, 170, 1);
    --hera-text-gray: rgba(113, 113, 122, 1);
    --hera-text-gray-lightest: rgba(113, 113, 122, 0.95);

    --hera-background-white: #1e1e1e;
    --hera-background-gray: #000;
    --hera-background-white-opacity: rgba(
        30,
        30,
        30,
        var(--hera-background-opacity)
    );
    --hera-background-gray-lightest: #121212;

    --hera-border-color: rgba(63, 63, 70, 0.6);
    --hera-border-color-light: rgba(63, 63, 70, 0.4);

    .doulist-item {
        background: rgba(63, 63, 70, 0.15);
    }

    .comment-form .submit {
        background-color: rgba(63, 63, 70, 1);
        &:hover {
            background-color: rgba(82, 82, 91, 1);
        }
    }

    .comment-form {
        input,
        textarea {
            background-color: rgba(63, 63, 70, 0.15);
            border-color: rgba(63, 63, 70, 1);
        }
    }
}
