/* Light/dark colours. main.css keeps the layout; this sheet only sets colours, and in light mode
   they are the site's original ones. The theme follows the visitor's system setting unless they
   picked one with the switcher (data-theme="light" or "dark" on <html>). */
:root {
    color-scheme: light dark;
    --page-bg: #FFF;
    --text: #222;
    --link: #06c;
    --field-text: #222;
    --ascii: #FAF8CC;
    --binary: #C3FDB8;
    --hex: #CFECEC;
    --b64: #EBDDE2;
    --char: #FDEEF4;
    --rot13: #F5FAFA;
    --urlencode: #DBF0F7;
    --entities: #8BFEA8;
    --toggle-border: #999;
    --button-bg: #333;
    --button-text: #fff;
    --button-shadow: 1px 1px #666;
    --notice-bg: #fff3cd;
    --notice-border: #e0c36a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page-bg: #15171a;
        --text: #dfe2e6;
        --link: #7db8ff;
        --field-text: #eceef1;
        /* each box keeps its colour, as a deep tint */
        --ascii: #3a3719;
        --binary: #1f3d22;
        --hex: #1d3a3a;
        --b64: #3a2d33;
        --char: #3f2733;
        --rot13: #2a3033;
        --urlencode: #1d3444;
        --entities: #174a26;
        --toggle-border: #5a6068;
        /* light buttons with dark text: 13.7:1 text contrast, at least 7.9:1 against every box */
        --button-bg: #dfe2e6;
        --button-text: #16181b;
        --button-shadow: none;
        --notice-bg: #3a3214;
        --notice-border: #7a6628;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #15171a;
    --text: #dfe2e6;
    --link: #7db8ff;
    --field-text: #eceef1;
    --ascii: #3a3719;
    --binary: #1f3d22;
    --hex: #1d3a3a;
    --b64: #3a2d33;
    --char: #3f2733;
    --rot13: #2a3033;
    --urlencode: #1d3444;
    --entities: #174a26;
    --toggle-border: #5a6068;
    --button-bg: #dfe2e6;
    --button-text: #16181b;
    --button-shadow: none;
    --notice-bg: #3a3214;
    --notice-border: #7a6628;
}

:root[data-theme="light"] {
    color-scheme: light;
}

html {
    background: var(--page-bg);
}

body {
    color: var(--text);
}

/* main.css sets dark text on textareas; the field background itself follows color-scheme */
textarea {
    color: var(--field-text);
}

a, a:visited {
    color: var(--link);
}

/* Convert and copy buttons (main.css: .button.black) */
.button.black {
    background-color: var(--button-bg);
    color: var(--button-text);
    text-shadow: var(--button-shadow);
}

/* Shown when long text was cut to the size limit */
.notice {
    margin: 0 0 10px;
    padding: 8px 12px;
    max-width: 840px;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
}

.box_ascii { background: var(--ascii); }
.box_binary { background: var(--binary); }
.box_hex { background: var(--hex); }
.box_b64 { background: var(--b64); }
.box_char { background: var(--char); }
.box_rot13 { background: var(--rot13); }
.box_urlencode { background: var(--urlencode); }
.box_entities { background: var(--entities); }

/* Theme switcher (top right): shows a moon in light mode and a sun in dark mode */
#theme-toggle {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 1px solid var(--toggle-border);
    border-radius: 50%;
    background: var(--page-bg);
    color: var(--text);
    cursor: pointer;
    line-height: 0;
}
#theme-toggle:hover, #theme-toggle:focus-visible {
    color: var(--link);
    border-color: var(--link);
}
#theme-toggle[hidden] {
    display: none;
}
#theme-toggle svg {
    width: 20px;
    height: 20px;
}
#theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; }
    :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }

/* Ads are light-scheme pages in frames. In dark mode the browser would paint a white backdrop
   behind them (visible beside ads narrower than their slot); matching schemes keeps it transparent. */
.adsbygoogle, .adsbygoogle iframe { color-scheme: light; }