/* JamStream documentation theme tokens.
 *
 * Every color here comes from palette.css, which is GENERATED by
 * scripts/render-palette.sh out of the DARK palette in
 * crates/client/src/theme.rs: the app is the single source of truth for
 * JamStream's colors and the docs adopt it exactly, so this file holds no
 * palette hex of its own. Adjust a color in theme.rs and rerun the script
 * (CI runs it with --check and fails on drift).
 *
 * One theme, dark only. Light mode is deliberately skipped for v1: the app
 * ships dark first and the docs match it; a light theme lands when the app's
 * light theme does (palette.css already carries the light values). The theme
 * picker is removed from index.hbs, so these variables live on :root and
 * apply unconditionally.
 *
 * Surfaces are near-black greys, never pure black. Four lightness steps
 * build depth: well, window, panel, raised. Text is off-white with one
 * muted step. One warm accent, used for links, the active nav item, and
 * focus, nothing else.
 */

:root {
    --sidebar-target-width: 300px;
    --sidebar-width: min(var(--sidebar-target-width), 80vw);
    --sidebar-resize-indicator-width: 8px;
    --sidebar-resize-indicator-space: 2px;
    --page-padding: 15px;
    --content-max-width: 750px;
    --menu-bar-height: 50px;
    --mono-font: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace, monospace;
    --code-font-size: 0.875em;
    --searchbar-margin-block-start: 5px;

    /* The names this theme uses for the app's surface steps. --js-well,
     * --js-accent, --js-danger and the meter colors are already spelled the
     * palette's way, so they come straight from palette.css. */
    --js-window: var(--js-surface0);
    --js-panel: var(--js-surface1);
    --js-raised: var(--js-surface2);
    --js-line: var(--js-border);
    --js-text: var(--js-text-primary);
    --js-muted: var(--js-text-muted);

    --bg: var(--js-window);
    --fg: var(--js-text);

    /* The sidebar is a panel over the window, the same relationship the
     * app's panel primitive has to its window background. */
    --sidebar-bg: var(--js-panel);
    --sidebar-fg: var(--js-muted);
    /* Draft chapters: dimmer than muted, so a tint of it rather than a
     * fifth grey of its own. */
    --sidebar-non-existant: rgba(var(--js-text-muted-rgb), 0.55);
    --sidebar-active: var(--js-accent);
    --sidebar-spacer: var(--js-line);

    --scrollbar: var(--js-line);

    --icons: rgba(var(--js-text-muted-rgb), 0.8);
    --icons-hover: var(--js-text);

    --links: var(--js-accent);

    /* Code foreground, not a surface color: it belongs to the syntax scheme
     * in theme/highlight.css and is kept in step with it, not the palette. */
    --inline-code-color: #d8d5d0;

    --theme-popup-bg: var(--js-panel);
    --theme-popup-border: var(--js-line);
    --theme-hover: var(--js-raised);

    --quote-bg: var(--js-panel);
    --quote-border: var(--js-line);

    --warning-border: var(--js-accent);

    --table-border-color: var(--js-line);
    --table-header-bg: var(--js-raised);
    --table-alternate-bg: var(--js-panel);

    --searchbar-border-color: var(--js-line);
    --searchbar-bg: var(--js-panel);
    --searchbar-fg: var(--js-text);
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: var(--js-muted);
    --searchresults-border-color: var(--js-line);
    --searchresults-li-bg: var(--js-panel);
    --search-mark-bg: rgba(var(--js-accent-rgb), 0.35);

    --color-scheme: dark;

    /* The copy button is a bitmap recolored by a filter chain, and a CSS
     * filter cannot reference a custom property, so these two stay
     * hand-tuned approximations of --icons and --js-accent rather than
     * palette-generated values. They are the only colors on this page that
     * are not derived from theme.rs. */
    --copy-button-filter: invert(50%) sepia(4%) saturate(200%) hue-rotate(20deg) brightness(95%) contrast(85%);
    --copy-button-filter-hover: invert(66%) sepia(48%) saturate(500%) hue-rotate(357deg) brightness(95%) contrast(88%);

    --footnote-highlight: rgba(var(--js-accent-rgb), 0.35);

    --overlay-bg: rgba(var(--js-surface0-rgb), 0.5);

    --blockquote-note-color: var(--js-muted);
    --blockquote-tip-color: var(--js-meter-green);
    --blockquote-important-color: var(--js-accent);
    --blockquote-warning-color: var(--js-accent);
    --blockquote-caution-color: var(--js-danger);

    --sidebar-header-border-color: var(--js-line);
}