/* Override this file to customise the theme's CSS for your site */

/* --- Wider page, readable text column ------------------------------------
   The risotto theme caps the whole page at 64rem and centres it, which leaves
   large empty margins on wide screens. Widen the page so it fills most of the
   viewport and resizes with the window, but keep body prose at a comfortable
   reading measure. Code blocks, tables, images, and blockquotes opt back out
   so they use the extra width. Adjust the two figures below to taste. */

.page {
    max-width: min(90rem, 95vw);
}

/* Cap the reading measure of post body text (~76 monospace chars). */
.content__body > * {
    max-width: 46rem;
}

/* Let wide block elements use the full body width. */
.content__body > pre,
.content__body > .highlight,
.content__body > table,
.content__body > figure,
.content__body > blockquote,
.content__body > p:has(> img) {
    max-width: 100%;
}

/* --- Colour themes -------------------------------------------------------
   The risotto theme renders a single palette: every semantic colour in
   colours.css (--bg, --fg, --link, …) derives from a base16 ramp,
   --base00..--base0F. We redefine that ramp under selectors so the same
   markup can present four ways:

     * Auto  — follow the OS via prefers-color-scheme (no JS, no flash).
     * Light — Solarized Light, forced regardless of OS.
     * Dark  — Solarized Dark, forced regardless of OS.
     * High contrast — a WCAG-AAA pair that ALSO follows the OS light/dark.

   The early inline script in head.html sets html[data-theme] from
   localStorage before first paint; header.html drives it from a dropdown.
   "Auto" simply removes the attribute, so the media query below governs.

   Specificity note: the theme's palette link sets a bare :root (0,1,0) as the
   dark default. :root:not([data-theme]) (0,2,0) wins for OS-light auto;
   html[data-theme="…"] (0,1,1) always wins when a choice is forced. The
   high-contrast rule re-declares under a later media query so its light
   variant overrides its dark variant when the OS prefers light. */

/* Auto: follow the OS. Default (no attribute) is Solarized Dark via the
   theme's palette link; this flips it to Solarized Light when the OS asks. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --base00: #fdf6e3;
        --base01: #eee8d5;
        --base02: #93a1a1;
        --base03: #839496;
        --base04: #657b83;
        --base05: #586e75;
        --base06: #073642;
        --base07: #002b36;
        --base08: #dc322f;
        --base09: #cb4b16;
        --base0A: #b58900;
        --base0B: #859900;
        --base0C: #2aa198;
        --base0D: #268bd2;
        --base0E: #6c71c4;
        --base0F: #d33682;
    }
}

/* Forced Solarized Light. */
html[data-theme="light"] {
    --base00: #fdf6e3;
    --base01: #eee8d5;
    --base02: #93a1a1;
    --base03: #839496;
    --base04: #657b83;
    --base05: #586e75;
    --base06: #073642;
    --base07: #002b36;
    --base08: #dc322f;
    --base09: #cb4b16;
    --base0A: #b58900;
    --base0B: #859900;
    --base0C: #2aa198;
    --base0D: #268bd2;
    --base0E: #6c71c4;
    --base0F: #d33682;
}

/* Forced Solarized Dark (e.g. user picks Dark while the OS prefers light). */
html[data-theme="dark"] {
    --base00: #002b36;
    --base01: #073642;
    --base02: #586e75;
    --base03: #657b83;
    --base04: #839496;
    --base05: #93a1a1;
    --base06: #eee8d5;
    --base07: #fdf6e3;
    --base08: #dc322f;
    --base09: #cb4b16;
    --base0A: #b58900;
    --base0B: #859900;
    --base0C: #2aa198;
    --base0D: #268bd2;
    --base0E: #6c71c4;
    --base0F: #d33682;
}

/* High contrast — dark variant (default for this mode). Solarized hues kept
   recognisable but brightened; bg/fg pushed to ~19:1. */
html[data-theme="contrast"] {
    --base00: #000000;
    --base01: #121212;
    --base02: #1e1e1e;
    --base03: #b8b8b8;
    --base04: #e6e6e6;
    --base05: #ffffff;
    --base06: #ffffff;
    --base07: #ffffff;
    --base08: #ff6b66;
    --base09: #ffae57;
    --base0A: #ffd700;
    --base0B: #5cff8f;
    --base0C: #5fe3ff;
    --base0D: #6cb6ff;
    --base0E: #d3a0ff;
    --base0F: #ff7ac6;
}

/* High contrast — light variant, used when the mode is on AND the OS prefers
   light. Black-on-white with darkened accents; bg/fg ~21:1. */
@media (prefers-color-scheme: light) {
    html[data-theme="contrast"] {
        --base00: #ffffff;
        --base01: #f0f0f0;
        --base02: #e4e4e4;
        --base03: #595959;
        --base04: #1f1f1f;
        --base05: #000000;
        --base06: #000000;
        --base07: #000000;
        --base08: #c00000;
        --base09: #9c4500;
        --base0A: #7a6000;
        --base0B: #1f7a1f;
        --base0C: #006e8a;
        --base0D: #0044cc;
        --base0E: #6a2cc4;
        --base0F: #b02080;
    }
}

/* --- Theme switcher control ---------------------------------------------- */
.theme-switch {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.theme-switch::marker {
    content: "";
}

.theme-switch__label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: lowercase;
}

.theme-switch__select {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--fg);
    background: var(--off-bg);
    border: 1px solid var(--muted);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
}

.theme-switch__select:hover {
    border-color: var(--link);
}