body.light {
    --light-bg: #f5f8fb;
    --light-panel: #ffffff;
    --light-border: #d8e1eb;
    --light-text: #1c2632;
    --light-muted: #5c6b7b;
    --light-accent: #2f8f8a;
    --link: #2f8f8a;
    --link-hover: #256f6b;
    --link-visited: #3d7db9;
    --link-underline: rgba(47, 143, 138, 0.35);
    --link-underline-hover: rgba(47, 143, 138, 0.65);

    background: var(--light-bg);
    color: #1b2530;
    border-bottom-color: #d8e1eb;
    backdrop-filter: none;
    .bg, .stars { display: none }

    & > main {
        max-width: 900px;
        margin: 32px auto 56px;
        border: 1px solid var(--light-border);
        border-radius: 18px;
        background: var(--light-panel);
        box-shadow: 0 16px 45px rgba(22, 32, 45, 0.08);

        header {
            border-bottom: 1px solid var(--light-border);
            background: #fbfcfe;

            .brand {
                .logo{
                    border-color: #d8e1eb;
                    background: #ffffff;
                    box-shadow: 0 10px 30px rgba(16, 24, 33, 0.10);
                }
                .site {
                    .name{ color: #1b2530; }
                    .tag{ color: #5c6b7b; }
                }
            }

            nav [role='menuitem'] span {
                color: var(--light-muted);
            }

            .actions {
                .active-section{
                    border-color: #d8e1eb;
                    background: #ffffff;
                    color: #2a3a4c;
                }

                .print-action{
                    border-color: #d8e1eb;
                    background: #ffffff;
                    color: #2f8f8a;

                    &:hover{
                        background: #f1f6fc;
                        border-color: #c9d5e3;
                        color: #256f6b;
                    }

                    &:focus-visible{
                        outline: 2px solid rgba(47,143,138,0.45);
                    }
                }

                details{
                    summary {
                        border-color: var(--light-border);
                        background: #fff;
                    }

                    .hamburger .h-line {
                        stroke: var(--light-muted);
                    }

                    nav{
                        border-color: var(--light-border);
                        background: #fff;
                        box-shadow: 0 18px 45px rgba(16,24,33,0.12);                

                        [role='menuitem'] {
                            color: var(--light-text);
                            svg { color: var(--light-accent) }
                        }


                        & > a,
                        & > div{
                            span{ color: #1b2530; }
                            svg{ color: #2f8f8a; }
                        }

                        & > a{
                            border-color: #e4ebf3;
                            background: #f8fbff;

                            &:hover{
                            background: #f1f6fc;
                            border-color: #d8e1eb;
                            }
                        }

                        & > div{
                            background: linear-gradient(180deg, rgba(79,182,176,0.18), rgba(255,255,255,0.92));
                            border-color: rgba(47,143,138,0.40);
                            box-shadow:
                            0 10px 28px rgba(47,143,138,0.14),
                            inset 0 0 0 1px rgba(255,255,255,0.75);

                            span{ color: #1b2530; }
                            svg{ color: #2f8f8a; }
                        }
                    }
                }
            }
        }
    }

    footer{
        color: #7b8a99;
        border-top-color: #d8e1eb;
        .footer-contact a,
        .footer-social a,
        .footer-address {
            color: #2a3a4c;

            svg{ color: #2f8f8a; }

            &:hover span{ color: #13202c; }
        }
        .footer-copy{ color: #7b8a99; }
    }

}


body.light {
    p{ color: #223142; }
    h1, h2, h3, h4, h5, h6{ color: #1b2530; }
    h3 { color: #243447; }
    h4{ color: #2b3c4f; }
    h5{ color: #34485d; }
    h6{ color: #446179; }

    ul, ol, dl, dd, em{ color: #2e4053; }

    dt, strong{ color: #1b2530; }

    hr{ background: #d8e1eb; }

    small{ color: #6f8192; }

    code{
        background: #f3f7fb;
        border-color: #d8e1eb;
    }

    pre{
        border-color: #d8e1eb;
        background: #f8fbff;
        box-shadow: 0 12px 26px rgba(22,32,45,0.10);
    }
    pre code{ color: #263849; }

    blockquote{
        border-color: #d8e1eb;
        background: #f8fbff;
        color: #2e4053;
    }

    ::selection{ background: rgba(47,143,138,0.22); }

    img{
        border-color: #d8e1eb;
        background: #ffffff;
        box-shadow: 0 14px 28px rgba(22, 32, 45, 0.10);
    }

    a:hover img{
        border-color: #c9d5e3;
        box-shadow: 0 16px 32px rgba(22, 32, 45, 0.14);
    }

    figcaption{ color: #667a8f; }
}