/* shared/theme.css — Single source of truth for all rpOS web viewer colors.
 *
 * LOG:
 * [2026-02-26] Request: "Theme is copy-pasted into 15 pages. Centralise into
 *   one file so changing a color means editing one place."
 * Intent: Every page links this file instead of defining its own :root vars.
 *   Brightness slider in Settings still works — JS sets --brightness on
 *   documentElement which overrides the default here.
 * Goal: One file for all theme variables. Pages only override layout-specific
 *   vars (e.g. --sidebar-width). No duplicate :root color definitions anywhere.
 */

:root {
    /* ── Brightness (30–70, controlled by Settings slider) ── */
    /* LOG[2026-02-26]:
     * Request: "Make a dark mode theme — no bright anything, no white letters.
     *   Text should be dim, lower text even dimmer. Like my terminal background."
     * Intent: Terminal bg is #1c1c1c (neutral dark gray). Current accent at 90%
     *   saturation was too bright/blue. Reduced to 35% so accent reads as muted
     *   blue-gray, not eye-catching. Default brightness lowered from 55→42.
     * Goal: Both text tiers are dim but distinguishable. Accent is slightly
     *   brighter muted blue-gray. No saturated/bright colors in body text.
     */
    --brightness: 42;

    /* ── Backgrounds ── */
    --bg-main: #0e1621;
    --bg-body: #0e1621;
    --bg-card: #17212b;
    --bg-sidebar: #17212b;
    --bg-panel: #17212b;
    --bg-header: #1f2936;
    --bg-tab: #17212b;
    --bg-tab-active: #2b5278;
    --bg-selected: #2b5278;
    --bg-content: #0e1621;
    --bg-section: #1f2936;
    --bg-input: #0e1621;
    --bg-hover: #202b36;

    /* ── Border ── */
    --border: #1c2733;

    /* ── Text — two tiers, HSL brightness ── */
    --text: hsl(210, 18%, calc(var(--brightness) * 1%));
    --text-muted: var(--text);
    --text-dim: var(--text);

    /* ── Accent — titles, highlights (muted, not bright) ── */
    --accent: hsl(210, 35%, calc((var(--brightness) + 10) * 1%));
    --accent-hover: hsl(210, 35%, calc((var(--brightness) + 17) * 1%));

    /* ── Status (dimmed to match muted theme) ── */
    --success: #3d7a46;
    --warning: #b8863a;
    --error: #c45a5a;

    /* ── Extras ── */
    --unread: #4a8ec4;
    --link: var(--accent);
    --version-highlight: #3d7a46;

    /* ── Terminal ── */
    /* LOG[2026-02-27]: Single source for terminal colors. All terminal UI
     * (viewport, tab strip, action bar) reads these. Settings page sets them. */
    --terminal-bg: #000000;
    --terminal-text: #586B7E;

    /* ── Scrollbar ── */
    --scrollbar-track: #0e1621;
    --scrollbar-thumb: #2b3640;
    --scrollbar-thumb-hover: #3a4a58;

    /* ── Fonts ── */
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-stack: var(--font);
    --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
}

/* ── Scrollbar styling (site-wide) ── */
/* LOG[2026-02-27]:
 * Request: "Scrollbar colors should be darker/dimmer to match dark theme."
 * Goal: All scrollbars site-wide use dark muted colors from theme vars.
 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}