html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --font: #eee8e2;
    --eternal-blue: #f0b29a;
}

html[data-theme="dark"] #container,
html[data-theme="dark"] body.public-profile {
    color-scheme: dark;
    --font: #eee8e2;
    --dark: #211e1b;
    --dark-opacity: #211e1be8;
    --bg-dark: #24211f;
    --bg-light: #39312d;
    --lines: #5a514a;
    --eternal-blue: #f0b29a;
}

html[data-theme="dark"] :is(input, textarea)::placeholder { color: #c8beb6; opacity: 1; }
html[data-theme="dark"] :is(input, textarea):autofill { color: #eee8e2; }
html[data-theme="dark"] :is(input, textarea):-webkit-autofill {
    -webkit-text-fill-color: #eee8e2;
    -webkit-box-shadow: 0 0 0 1000px #282421 inset;
    caret-color: #eee8e2;
}

html[data-theme="dark"] #container .eyebrow,
html[data-theme="dark"] #container #posts .story-like,
html[data-theme="dark"] #container #posts .story-like .material-symbols-outlined,
html[data-theme="dark"] #container :is(.about-mark, .team-links a, .support-link) > .material-symbols-outlined,
html[data-theme="dark"] #container .community-empty > .material-symbols-outlined { color: #f0b29a; }
html[data-theme="dark"] #container #conta #conta-conteiner #contador,
html[data-theme="dark"] #container #conta-conteiner #postslist #account-posts-status { color: #d4cbc4; }
html[data-theme="dark"] #container #conta #conta-conteiner #userList :is(select, input[type="submit"]) {
    background: #493932;
    color: #fff4eb;
}
html[data-theme="dark"] #container #conta #conta-conteiner #banner input[type="text"] {
    color: #eee8e2;
    background: #24211f;
    border-color: #817065;
}
html[data-theme="dark"] #container #conta #conta-conteiner #edit :is(input, textarea),
html[data-theme="dark"] #container #conta #conta-conteiner #edit #view,
html[data-theme="dark"] #container #conta #conta-conteiner #edit #view :is(h1,h2,h3,h4,p,li,strong,em,span) { color: #eee8e2; }
html[data-theme="dark"] .markdown-body :is(h4,h5,h6,dt,dd,table,td,th,del,summary) { color: #eee8e2; }
html[data-theme="dark"] .markdown-body .hljs,
html[data-theme="dark"] .markdown-body .hljs * { color: #eee8e2; background-color: #302c29; }
html[data-theme="dark"] .markdown-body .hljs :is(.hljs-comment,.hljs-quote) { color: #c8beb6; }
html[data-theme="dark"] .markdown-body .hljs :is(.hljs-keyword,.hljs-string,.hljs-number,.hljs-title) { color: #f0b29a; }

.theme-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 82px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #ffffff40;
    border-radius: 999px;
    background: #ffffff12;
    color: #fff7ef;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: #ffffff80;
    background: #ffffff24;
}

.theme-toggle .material-symbols-outlined {
    font-size: 19px;
}

.theme-toggle-label {
    white-space: nowrap;
}

.theme-toggle:focus-visible {
    outline: 3px solid #e4ad8d;
    outline-offset: 2px;
}

.auth-theme,
.profile-theme {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: max(20px, calc((100% - 1080px) / 2));
    border-color: #7a392b40;
    background: #fffdfa;
    color: #704033;
}

.auth-theme:hover,
.auth-theme:focus-visible,
.profile-theme:hover,
.profile-theme:focus-visible {
    border-color: #7a392b80;
    background: #f4eae3;
}

@media (max-width: 640px) {
    .site-header > .theme-toggle {
        min-width: 40px;
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .site-header > .theme-toggle .theme-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle {
        transition: none;
    }
}

html[data-theme="dark"] body {
    background-color: #171513;
    color: #eee8e2;
}

html[data-theme="dark"] #container,
html[data-theme="dark"] body.public-profile #posts {
    border-color: #ffffff18;
    background: #24211f;
    color: #eee8e2;
}

html[data-theme="dark"] #container #posts .section-heading h2,
html[data-theme="dark"] #container #posts .section-heading .section-note,
html[data-theme="dark"] #container #posts > ul > li.story-card > div > label,
html[data-theme="dark"] #container #posts > ul > li.story-card > p,
html[data-theme="dark"] #container #posts > ul > li.story-card > div > h3,
html[data-theme="dark"] .about-page,
html[data-theme="dark"] .about-page h1,
html[data-theme="dark"] .about-page h2,
html[data-theme="dark"] .about-page p:not(.eyebrow),
html[data-theme="dark"] .support-link strong,
html[data-theme="dark"] .support-link span span,
html[data-theme="dark"] .team-links strong,
html[data-theme="dark"] .team-links small,
html[data-theme="dark"] .community-page,
html[data-theme="dark"] .community-heading h1,
html[data-theme="dark"] .community-empty h2,
html[data-theme="dark"] .community-empty p,
html[data-theme="dark"] .community-footnote,
html[data-theme="dark"] .profile-stories-heading h1,
html[data-theme="dark"] body.public-profile #posts > ul > a,
html[data-theme="dark"] body.public-profile #posts > ul > a > li > div > label,
html[data-theme="dark"] body.public-profile #posts > ul > a > li > div > h3,
html[data-theme="dark"] body.public-profile #posts > ul > a > li > p,
html[data-theme="dark"] body.public-profile #posts #profile-status,
html[data-theme="dark"] #container #conta-conteiner #postslist .stories-heading h1,
html[data-theme="dark"] #container #conta-conteiner #postslist .stories-heading > p:last-child,
html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > div > label,
html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > div > p,
html[data-theme="dark"] body:has(#form) #form > h1,
html[data-theme="dark"] body:has(#form) #form .auth-input > input,
html[data-theme="dark"] body:has(#form) #form .auth-form > p {
    color: #eee8e2;
}

html[data-theme="dark"] #container #posts > ul > li.story-card,
html[data-theme="dark"] #container #posts #load > ul > li,
html[data-theme="dark"] #container #posts #rodape,
html[data-theme="dark"] .about-section,
html[data-theme="dark"] .support-section,
html[data-theme="dark"] .team-section,
html[data-theme="dark"] .community-panel,
html[data-theme="dark"] .community-heading,
html[data-theme="dark"] body.public-profile #posts > ul > a > li,
html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li,
html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > hgroup {
    border-color: #ffffff1a;
    background-color: #302c29;
}

html[data-theme="dark"] .support-link,
html[data-theme="dark"] .team-links a,
html[data-theme="dark"] body:has(#form) #form,
html[data-theme="dark"] body:has(#form) #form .auth-input,
html[data-theme="dark"] body:has(#form) #form .auth-input input:focus ~ label,
html[data-theme="dark"] body:has(#form) #form .auth-input input:valid ~ label {
    border-color: #ffffff20;
    background-color: #282421;
}

html[data-theme="dark"] .about-mark,
html[data-theme="dark"] .community-empty,
html[data-theme="dark"] .community-footnote,
html[data-theme="dark"] #container #posts > ul > li.story-card > hgroup,
html[data-theme="dark"] body.public-profile #posts > ul > a > li > hgroup,
html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > hgroup {
    background-color: #3b302b;
}

html[data-theme="dark"] .community-heading,
html[data-theme="dark"] .community-footnote {
    border-color: #ffffff20;
}

html[data-theme="dark"] #container #posts #load .lineanimation {
    background: linear-gradient(90deg, #38332f 20%, #49413c 50%, #38332f 80%);
}

html[data-theme="dark"] #container #posts #load .skeleton-lines div {
    background: #49413c;
}

html[data-theme="dark"] #container #posts #rodape {
    color: #d4cbc4;
}

html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > hgroup > button {
    color: #f0b29a;
}

html[data-theme="dark"] #container #conta-conteiner #postslist > ul > li > hgroup > button:hover {
    background: #493932;
}

html[data-theme="dark"] #container #conta,
html[data-theme="dark"] #container #conta #conta-conteiner,
html[data-theme="dark"] #container #conta #conta-menu,
html[data-theme="dark"] #container #conta #conta-conteiner #edit,
html[data-theme="dark"] #container #conta #conta-conteiner #searchBar,
html[data-theme="dark"] #container #conta #conta-conteiner #userList {
    border-color: #ffffff20;
    background: #302c29;
}

html[data-theme="dark"] #container #conta #conta-menu > ul > li > button,
html[data-theme="dark"] #container #conta #conta-conteiner #input_text input,
html[data-theme="dark"] #container #conta #conta-conteiner #newUser,
html[data-theme="dark"] #container #conta #conta-conteiner #userInput,
html[data-theme="dark"] #container #conta #conta-conteiner #edit,
html[data-theme="dark"] #container #conta #conta-conteiner #edit #view,
html[data-theme="dark"] #container #conta #conta-conteiner #userList > li,
html[data-theme="dark"] #container #conta #conta-conteiner #userList > li label,
html[data-theme="dark"] #container #conta #conta-conteiner #userList > li a,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown h1,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown h2,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown h3,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown p,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown li,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown strong,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess #markdown em {
    color: #eee8e2;
}

html[data-theme="dark"] #container #conta #conta-menu > ul > li:hover,
html[data-theme="dark"] #container #conta #conta-menu > ul > li:hover button,
html[data-theme="dark"] #container #conta #conta-conteiner #edit > ul,
html[data-theme="dark"] #container #conta #conta-conteiner #textArea,
html[data-theme="dark"] #container #conta #conta-conteiner #textProccess,
html[data-theme="dark"] #container #conta #conta-conteiner #edit > li input[type="text"],
html[data-theme="dark"] #container #conta #conta-conteiner #edit > li textarea {
    background: #39332f;
}

html[data-theme="dark"] #container #conta #conta-conteiner #input_text input,
html[data-theme="dark"] #container #conta #conta-conteiner #userInput,
html[data-theme="dark"] #container #conta #conta-conteiner #edit > li input[type="text"],
html[data-theme="dark"] #container #conta #conta-conteiner #edit > li textarea,
html[data-theme="dark"] #container #conta #conta-conteiner #searchBar {
    border-color: #5a514a;
}

html[data-theme="dark"] body:has(#form) #form .auth-input > label,
html[data-theme="dark"] body:has(#form) #form .auth-form > p a,
html[data-theme="dark"] body:has(#form) #form .auth-input > span {
    color: #e3a58d;
}

html[data-theme="dark"] body:has(#form) #form .auth-input > input {
    background: transparent;
}

html[data-theme="dark"] body:has(#form) #form #formBTN .auth-action:nth-child(3) {
    border-color: #51443c;
    background: #39312d;
    color: #f1e9e2;
}

html[data-theme="dark"] body:has(#post) {
    background: #171513;
    color: #eee8e2;
}

html[data-theme="dark"] body:has(#post) #post,
html[data-theme="dark"] body:has(#comment) #comment {
    border-color: #ffffff1a;
    background: #24211f;
}

html[data-theme="dark"] body:has(#post) #post #menu,
html[data-theme="dark"] body:has(#comment) #comment #textbar {
    border-color: #ffffff1a;
    background: #302c29;
}

html[data-theme="dark"] body:has(#post) #post #menu hgroup a,
html[data-theme="dark"] body:has(#post) #post #menu hgroup a span,
html[data-theme="dark"] body:has(#post) #post #ap_post #titulos,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown h1,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown h2,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown h3,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown p,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown li,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown strong,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown em,
html[data-theme="dark"] body:has(#comment) #comment * {
    color: #eee8e2;
}

html[data-theme="dark"] body:has(#post) #post #ap_post #markdown pre,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown code {
    background-color: #302c29;
    color: #eee8e2;
}

html[data-theme="dark"] body:has(#post) #post #ap_post #markdown blockquote {
    border-color: #8b6656;
    color: #d8cec7;
}

html[data-theme="dark"] body:has(#post) #post #ap_post #markdown th,
html[data-theme="dark"] body:has(#post) #post #ap_post #markdown td {
    border-color: #514942;
}

html[data-theme="dark"] body:has(#post) #post #ap_post,
html[data-theme="dark"] body:has(#comment) #comment #textbar input {
    background: #24211f;
}

html[data-theme="dark"] body:has(#post) #post #ap_post #markdown a,
html[data-theme="dark"] body:has(#comment) #comment > ul > li hgroup label a {
    color: #e3a58d;
}

html[data-theme="dark"] body:has(#comment) #comment > ul > li {
    border-color: #ffffff18;
}

html[data-theme="dark"] body:has(#comment) #comment #textbar input {
    border-color: #514942;
}

html[data-theme="dark"] .auth-home,
html[data-theme="dark"] .auth-theme,
html[data-theme="dark"] .profile-theme {
    border-color: #ffffff30;
    background: #302c29;
    color: #f1e9e2;
}

html[data-theme="dark"] body.public-profile #posts > ul > a > li > hgroup {
    color: #f0b29a;
}

html[data-theme="dark"] #container #conta-conteiner #postslist .stories-heading .eyebrow,
html[data-theme="dark"] .profile-stories-heading .eyebrow,
html[data-theme="dark"] .about-page .eyebrow,
html[data-theme="dark"] .community-heading .eyebrow {
    color: #e3a58d;
}

/* Match the component selectors so later-loaded styles cannot restore light-theme text. */
html[data-theme="dark"] #container #posts .section-heading .eyebrow { color: #f0b29a; }
html[data-theme="dark"] #container #conta #conta-conteiner #postslist .stories-heading h1 { color: #eee8e2; }
html[data-theme="dark"] #container #conta #conta-conteiner #postslist .stories-heading > p:last-child { color: #d4cbc4; }
html[data-theme="dark"] #container #conta #conta-conteiner #edit:not(textarea) > li :is(input[type="text"], textarea) { color: #eee8e2; }
html[data-theme="dark"] body:has(#post) #post #menu > a { color: #f0b29a; }
html[data-theme="dark"] body:has(#comment) #comment #textbar input { color: #eee8e2; }
html[data-theme="dark"] .theme-toggle .theme-toggle-label { color: #fff; }
html[data-theme="dark"] #container #conta #conta-conteiner #searchBar { color: #eee8e2; }
html[data-theme="dark"] body.public-profile #posts > ul > a > li > hgroup .material-symbols-outlined { color: #f0b29a; }
html[data-theme="dark"] #container #conta #conta-menu > ul > li > button span { color: #f0b29a; }