/* ============================================================================ claude-theme.css — shared claude.ai design-system stylesheet for AutomationTG ---------------------------------------------------------------------------- THREE-theme, accent-overridable token system. Themes are selected by (NEVER by prefers-color-scheme, so the user's explicit choice always wins). Any prefers-* rule is gated to :root:not([data-theme]) so it only acts as a no-choice fallback. :root / [data-theme="light"] LIGHT — clean, bright, warm-neutral [data-theme="sand"] SAND — the classic claude.ai warm paper (this is the app's default look; appearance.js sets data-theme=sand when the user hasn't chosen one) [data-theme="dark"] DARK — warm dark (not cold slate) ACCENT — every accent usage flows from three vars: --c-accent · --c-accent-hover · --c-accent-active The default family is "clay" (#CC785C). At runtime appearance.js overrides those three INLINE on , which beats every rule here. Everything else that uses the accent (subtle wash, focus ring, selection) is DERIVED from --c-accent via color-mix in each theme block, so overriding just those three recolours the whole UI in any theme — no extra vars required from appearance.js. The file then REMAPS every Tailwind CDN utility class the pages use (gray/blue/red/green/etc.) onto the --c-* tokens, so the same markup adopts the active theme + accent automatically. !important beats the Tailwind CDN. Include on every page, AFTER the Tailwind CDN