html { color-scheme: light dark; }

:root {
    --clr-body-bg: light-dark(#e4e3e3, #141414);
    --clr-body-txt: light-dark(#141414, #fff);
    --clr-content-bg: light-dark(#ffffff, #242424);

    --clr-top-btn-bg: light-dark(#552190, #552190);
    --clr-top-btn-txt: #ffffff;

    --clr-main-heading: light-dark(#171717, #daaced);
    --clr-sub-heading: light-dark(#111111, #fff);
    --clr-title-border: light-dark(#7629db, #9964de);
    --clr-bold-txt: light-dark(#da4500, #ff9869);
    --clr-link: light-dark(#7629db, #ce97ff);
    --clr-link-hover: light-dark(#270e48, #b366f7);
    --clr-quote-bg: light-dark(#f3f2f2, #141414);
    --clr-quote-border: light-dark(#414141, #f3f2f2);
    --clr-cw-hover: #fae5e5;

    --clr-code-bg: #f3f2f2;
    --clr-code-border: #414141;
    --clr-dates: #3a96ff;

    --clr-link-btn-bg: #873eb5;
    --clr-link-btn-txt: white;
    --clr-link-btn-hover: #241445;

    --clr-hero-bg: #7944B6;
    --clr-navbar-bg: light-dark(#9b59b6, #3a0873);
    --clr-navbar-link: white;

    --clr-main-footer-bg: light-dark(#9b59b6, #3a0873);
}

.hero__top-bar,
.footer,
.footer a { color: var(--clr-navbar-link); }

.footer a:focus { outline-color: var(--clr-navbar-link); }