/* Shared warm palette for Tools and every standalone tool. */
:root {
    color-scheme: light;
    --tools-paper: var(--bg-color, color-mix(in srgb, #ff7800 20%, white));
    --tools-surface: #fff3e8;
    --tools-ink: #302820;
    --tools-muted: #786550;
    --tools-line: #dfb58f;
    --tools-accent: #ff7800;
    --tools-tint: #ffdcc0;
    --tools-featured: #ffd1a6;
    --tools-hover: #fff4e4;
    --tools-warm: #fff3e3;
    --tools-shadow: #59351924;
    --tools-backdrop: #39241855;
    --tools-toast: #593c2a;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --tools-paper: var(--bg-color, color-mix(in srgb, #ffa348 10%, black));
    --tools-surface: #2d211a;
    --tools-ink: #fff1df;
    --tools-muted: #cdbba6;
    --tools-line: #705038;
    --tools-accent: #ffa348;
    --tools-tint: #442d1d;
    --tools-featured: #49321c;
    --tools-hover: #4e3821;
    --tools-warm: #352b22;
    --tools-shadow: #00000040;
    --tools-backdrop: #130c08a6;
    --tools-toast: #593c2a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tools-paper: var(--bg-color, color-mix(in srgb, #ffa348 10%, black));
    --tools-surface: #2d211a;
    --tools-ink: #fff1df;
    --tools-muted: #cdbba6;
    --tools-line: #705038;
    --tools-accent: #ffa348;
    --tools-tint: #442d1d;
    --tools-featured: #49321c;
    --tools-hover: #4e3821;
    --tools-warm: #352b22;
    --tools-shadow: #00000040;
    --tools-backdrop: #130c08a6;
    --tools-toast: #593c2a;
    }
}

/* Shared material and type scale, matching the blog's raised warm surfaces. */
:root {
    --tools-font: "Jost", "Noto Sans SC", system-ui, sans-serif;
    --tools-radius: 14px;
    --tools-radius-large: 20px;
    --tools-glass: color-mix(in srgb, var(--tools-surface) 92%, transparent);
    --tools-raised: inset 0 1px 0 #ffffff26, 0 2px 5px var(--tools-shadow), 0 10px 22px -14px var(--tools-shadow);
    --tools-floating: inset 0 1px 0 #ffffff30, 0 3px 8px var(--tools-shadow), 0 14px 32px -18px var(--tools-shadow);
}