/* Shared site chrome. Artwork and embedded games keep their original colours. */
:root {
    --theme-ink: #41403e;
    --theme-muted: #666;
    --theme-surface: #fffef8;
    --theme-edge: #41403e;
    --theme-accent: #9c205b;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --theme-ink: #eee9df;
    --theme-muted: #bdb6aa;
    --theme-surface: #2d2e30;
    --theme-edge: #88857e;
    --theme-accent: #ffa4c6;
    color-scheme: dark;
}

/* Layer the new page above the old page and grow it from the pressed control. */
html.themeTransition::view-transition-group(root) {
    animation: none;
}
html.themeTransition::view-transition-image-pair(root) {
    isolation: isolate;
}
html.themeTransition::view-transition-old(root),
html.themeTransition::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
html.themeTransition::view-transition-old(root) { z-index: 1; }
html.themeTransition::view-transition-new(root) {
    z-index: 2;
    animation: themeCircleReveal 650ms cubic-bezier(0.35, 0, 0.2, 1) both;
}
@keyframes themeCircleReveal {
    from { clip-path: circle(0px at var(--theme-reveal-x) var(--theme-reveal-y)); }
    to { clip-path: circle(var(--theme-reveal-radius) at var(--theme-reveal-x) var(--theme-reveal-y)); }
}
@media (prefers-reduced-motion: reduce) {
    html.themeTransition::view-transition-new(root) { animation: none; }
}

.themeControls {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* A dedicated top row keeps the controls clear of the logo and navigation. */
.themeControls + #mainContentHolder #mainContent { padding-top: 0; }
.themeControls + .sectionPage { padding-top: 12px; }

.themeToggle,
.themeSystem {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 7px 11px;
    color: var(--theme-ink);
    background: var(--theme-surface);
    border: 1px solid var(--theme-edge);
    border-radius: 14px 3px 12px 4px / 4px 12px 3px 14px;
    font: 18px/1.2 "myhandwritingBold", Arial, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.themeToggle { min-width: 126px; }
.themeToggle svg { flex-shrink: 0; }
.themeToggle:hover,
.themeSystem:hover { color: var(--theme-accent); border-color: currentColor; }
.themeSystem { font-size: 16px; }
.themeSystem[aria-pressed="true"] { color: var(--theme-accent); border-color: currentColor; }
.themeToggle:focus-visible,
.themeSystem:focus-visible {
    outline: 2px dashed var(--theme-accent);
    outline-offset: 4px;
}

html[data-theme="dark"] body {
    color: var(--theme-ink);
    background-color: #202124;
    /* Reuse the paper grain as charcoal, without filtering the whole page. */
    background-image: linear-gradient(#202124ed, #202124ed), url("../images/paper.png");
}

html[data-theme="dark"] a,
html[data-theme="dark"] a:visited {
    color: inherit;
}

html[data-theme="dark"] .homeSectionNav,
html[data-theme="dark"] .item,
html[data-theme="dark"] .sectionCard,
html[data-theme="dark"] .sectionNav a:first-child,
html[data-theme="dark"] .scribbleBack,
html[data-theme="dark"] .webLogArticle,
html[data-theme="dark"] .toonSheet {
    color: var(--theme-ink);
    background: var(--theme-surface);
    border-color: var(--theme-edge);
    box-shadow: 4px 6px 7px #0005;
}

html[data-theme="dark"] .homeSectionNav .homeNavSubheading {
    border-color: #77736d;
}

html[data-theme="dark"] .homeSectionNav a:hover,
html[data-theme="dark"] .homeSectionNav a:focus-visible,
html[data-theme="dark"] .sectionHeadingLink:hover,
html[data-theme="dark"] .sectionHeadingLink:focus-visible,
html[data-theme="dark"] .sectionNav a[aria-current="page"],
html[data-theme="dark"] .sectionNav a:hover,
html[data-theme="dark"] .webLogArticle p a,
html[data-theme="dark"] .homeLatestSketch a:hover,
html[data-theme="dark"] .homeLatestSketch a:focus-visible {
    color: var(--theme-accent);
}

html[data-theme="dark"] :is(a, button):focus-visible {
    outline: 2px dashed var(--theme-accent);
    outline-offset: 5px;
}

html[data-theme="dark"] .itemSubtitle,
html[data-theme="dark"] .itemGroupSubtitle,
html[data-theme="dark"] .cardDate,
html[data-theme="dark"] .sectionCard .cardSubtitle,
html[data-theme="dark"] .sectionCard .cardDate,
html[data-theme="dark"] .webLogArticle figcaption,
html[data-theme="dark"] .webLogGameLink small,
html[data-theme="dark"] .homeLatestSketch .latest-sketch-fallback,
html[data-theme="dark"] .thumbPlaceholder {
    color: var(--theme-muted);
}

html[data-theme="dark"] .tape {
    background: #d1c7ad33;
    border-color: #e6dcc13d;
    border-bottom-color: #b7ab8a33;
    border-right-color: #b7ab8a33;
}

html[data-theme="dark"] .homeLatestSketch {
    background: linear-gradient(155deg, #3b382e, #312f28);
    border-color: #82765b;
    box-shadow: 2px 6px 9px #0005;
}

html[data-theme="dark"] .homeLatestSketch::before {
    background: linear-gradient(100deg, #b9a67a66, #d1bd8b80 45%, #b9a67a66);
    border-color: #d1bd8b55;
}

html[data-theme="dark"] .homeLatestSketch img,
html[data-theme="dark"] .sectionCard img,
html[data-theme="dark"] #scribble img,
html[data-theme="dark"] #scribble iframe {
    border-color: #77736d;
}

html[data-theme="dark"] .webLogArticle figure,
html[data-theme="dark"] .webLogGameLink {
    color: var(--theme-ink);
    background: #252628;
    border-color: #77736d;
}

html[data-theme="dark"] .webLogHeader .webLogLabel { color: #8ed3df; }
html[data-theme="dark"] .webLogArticle hr { border-color: #77736d; }
html[data-theme="dark"] .toonThumb { background: #252628; border-color: #77736d; }
html[data-theme="dark"] .toonCard.isActive {
    box-shadow: 0 0 0 4px #e6c861, 8px 9px 8px #0005;
}