/*
 * TEMPORARY — THE BLUE-VS-GREY DECISION TOOL (Jerry, 2026-08-26).
 *
 * Two candidate palettes for the whole product:
 *   data-palette="grey" — the Studio's claude palette everywhere: the SITE tokens
 *                          (tokens.css) are remapped to the Studio's measured values.
 *   data-palette="blue" — today's site palette everywhere: the STUDIO tokens
 *                          (claude-theme.css) are remapped to the site's values.
 *
 * Values are literal copies of the two token files' own numbers — this file must not
 * invent a third palette. `html[data-palette]` (0,1,1) outranks both files' `:root`
 * (0,1,0), so no rule inside them needs touching. The attribute is applied before
 * first paint by the inline script in app.html and toggled by PaletteToggle.svelte.
 * All three die together once the ruling lands and the winner moves into the real
 * token files.
 *
 * Scope: surfaces, text, borders and the PRIMARY accent pair — the palette identity.
 * Semantic colours (danger/warn/ok, verdict trio, VIP tiers) are shared vocabulary,
 * not palette, and stay as they are in both modes.
 */

/* ---- GREY EVERYWHERE: the Studio's values onto the site's tokens ----
 * The ACCENT stays the site's blue in both modes (Jerry, 2026-08-26: "change the orange
 * highlight to a blue highlight") — so grey mode is grey SURFACES + blue highlight, and
 * the claude orange appears nowhere. The site tokens already carry the blue primary, so
 * only the Studio's own accent needs remapping here. */
html[data-palette='grey'] {
	--color-bg: rgb(22, 21, 20);
	--color-surface: rgb(39, 37, 35);
	--color-surface-raised: rgb(49, 47, 44);
	--color-surface-sunken: rgb(26, 25, 23);
	--color-border: rgba(255, 253, 250, 0.13);
	--color-border-strong: rgba(255, 253, 250, 0.35);
	--color-text: rgb(241, 239, 233);
	--color-text-muted: rgb(166, 161, 150);
	--color-text-faint: rgb(117, 114, 105);
	--color-control: rgb(49, 47, 44);
	--color-control-ink: rgb(241, 239, 233);
}

/* The Studio's accent follows the highlight ruling too — no orange in grey mode.
 * SCOPED ON `.cstudio`, NOT `html`: claude-theme.css defines the studio tokens on the
 * component element itself, and a custom property set ON an element beats anything
 * inherited from an ancestor — an html-level override never reaches the studio at all
 * (measured: "blue mode is still not blue", 2026-08-26). Same rule for the blue block. */
html[data-palette='grey'] .cstudio {
	--c-accent: #1475e1;
	--c-accent-press: #0f57a8;
}

/* ---- BLUE EVERYWHERE: the site's values onto the Studio's tokens ---- */
html[data-palette='blue'] .cstudio {
	--c-bg: #13232d;
	--c-rail: #0f1c24;
	--c-bg-raised: #1a2e39;
	--c-bg-card: #203743;
	--c-text: #f7fafc;
	--c-text-muted: #9fbed0;
	--c-text-faint: #6d8494;
	--c-border: rgba(131, 163, 182, 0.28);
	--c-border-strong: rgba(131, 163, 182, 0.5);
	--c-accent: #1475e1;
	--c-accent-press: #0f57a8;
	--c-ink-on-accent: #ffffff;
	--c-wash-hover: rgb(247 250 252 / 0.09);
	--c-wash-subtle: rgb(247 250 252 / 0.06);
}