/* theme.css — shared theme CHROME: base-model colour chip + theme-toggle button + theme transition.
 *
 * Load AFTER common.css. The light/dark PALETTES (the design tokens) live in common.css: :root is dark,
 * @media(prefers-color-scheme: light) + body.light are light, body.dark is explicit dark. FoxTheme
 * (js/theme.js) always sets exactly one of body.light / body.dark. This file adds only the visuals that
 * ride on top of those tokens — the base-model colour chip and the toggle button — plus the transition. */

/* Smooth the switch between themes. */
body { transition: background-color 150ms ease, color 150ms ease; }

/* ── Base-model colour chip ──────────────────────────────────────────── */
/* Hue (--bm-h) is set inline from FoxTheme.baseModelHue; S/L are pinned per theme so it's always legible.
   Chips without --bm-h fall back to a neutral border. */
.bm-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-input);
    color: var(--text);
    border: 1.5px solid hsl(var(--bm-h, 230), 60%, 64%);   /* dark theme (default): brighter */
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
body.light .bm-badge { border-color: hsl(var(--bm-h, 230), 55%, 46%); }   /* light theme: deeper */

/* ── Theme toggle button ─────────────────────────────────────────────── */
.theme-toggle {
    appearance: none;
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.theme-toggle:hover { background: var(--bg-hover); border-color: var(--border-light); }