/* ============================================================ FixSense Chat — design tokens + theming ------------------------------------------------------------ Two switchable color schemes, selected via a data-theme attribute on : (default) The app never references raw brand colors — it uses the SEMANTIC aliases below (--accent, --accent-2, --bg-*, ...), so adding a third theme is just another data-theme block. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root{ /* --- shared, theme-independent --- */ --radius:14px; --radius-sm:9px; --radius-lg:20px; --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; --green:#4ADE80; --danger:#FF5C5C; } /* ============================================================ THEME 1 — Navy + Yellow (default) base: deep navy | primary: yellow | secondary: blue-cyan ============================================================ */ :root, [data-theme="navy-yellow"]{ /* surfaces (navy graphite ramp) */ --bg-900:#0B1020; --bg-850:#0E1428; --bg-800:#121A33; --bg-750:#16203C; --bg-700:#1B2747; --bg-600:#233158; --bg-500:#2E3D6A; --line:#2C3A63; --line-soft:#1F2A4A; /* text */ --tx-hi:#F3F6FF; --tx-mid:#A8B4D4; --tx-lo:#6B78A0; --tx-dim:#48547A; /* accents */ --accent:#FFC531; /* yellow primary */ --accent-dim:#C89A1F; --accent-glow:rgba(255,197,49,0.16); --accent-ink:#0B1020; /* text on top of accent fills */ --accent-2:#48C6E8; /* cool blue secondary */ --accent-2-dim:#2E9BBB; --accent-2-glow:rgba(72,198,232,0.14); /* source-chip kinds */ --kind-manual-bg:rgba(255,197,49,0.14); --kind-manual-fg:#FFC531; --kind-standard-bg:rgba(72,198,232,0.16); --kind-standard-fg:#6FD0EC; --kind-capture-bg:rgba(74,222,128,0.14); --kind-capture-fg:#4ADE80; --kind-product-bg:rgba(72,198,232,0.14); --kind-product-fg:#48C6E8; } /* ============================================================ THEME 2 — Red + Blue base: cool slate | primary: red | secondary: blue ============================================================ */ [data-theme="red-blue"]{ /* surfaces (neutral-cool slate ramp) */ --bg-900:#0D1017; --bg-850:#10141c; --bg-800:#141821; --bg-750:#181d27; --bg-700:#1B212D; --bg-600:#232B3A; --bg-500:#2E3849; --line:#303B4D; --line-soft:#242c39; /* text */ --tx-hi:#F5F6F8; --tx-mid:#AEB6C4; --tx-lo:#6B7688; --tx-dim:#4C5567; /* accents */ --accent:#F5484B; /* red primary */ --accent-dim:#C13539; --accent-glow:rgba(245,72,75,0.16); --accent-ink:#0D1017; --accent-2:#4C8DFF; /* blue secondary */ --accent-2-dim:#356FD6; --accent-2-glow:rgba(76,141,255,0.16); /* source-chip kinds */ --kind-manual-bg:rgba(245,72,75,0.14); --kind-manual-fg:#FF7275; --kind-standard-bg:rgba(76,141,255,0.16); --kind-standard-fg:#7FACFF; --kind-capture-bg:rgba(74,222,128,0.14); --kind-capture-fg:#4ADE80; --kind-product-bg:rgba(76,141,255,0.14); --kind-product-fg:#4C8DFF; } /* ------------------------------------------------------------ Smooth transition when the theme flips ------------------------------------------------------------ */ body, .sidebar, .main, .composer-box, .convo, .bubble, .source-chip, .w-chip, .mode-badge, .new-chat, .send-btn, .sb-search input{ transition: background-color .35s ease, border-color .35s ease, color .25s ease; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.55;background:var(--bg-900);color:var(--tx-hi)} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,textarea,select{font-family:inherit} .mono{font-family:var(--font-mono)} ::selection{background:var(--accent);color:var(--accent-ink)} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--line)}