/* ============================================================ LLMemory — Halo design system Tokens for light + dark. Toggle via [data-theme] on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root, [data-theme="light"]{ /* surfaces */ --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eef0f5; --surface-3:#e6e9f1; --border:#e3e6ee; --border-strong:#d3d7e2; /* ink */ --text:#161a22; --text-2:#565d6e; --text-3:#969cad; /* brand */ --accent:#3f5bd6; --accent-hover:#3550c4; --accent-press:#2c44b6; --accent-soft:#e8ebfb; --accent-softer:#f1f3fc; --accent-text:#2f49bf; --accent-2:#7c5fde; /* lilac, tuned for AA on light */ --accent-2-soft:#f0ebfb; --on-accent:#ffffff; /* status */ --live:#1fa873; --live-soft:#dcf4ea; --warn:#c77b2c; --danger:#d6483f; /* tile gradient (app icon) */ --tile-1:#3a55d4; --tile-2:#6a4fd6; /* elevation */ --shadow-xs:0 1px 2px rgba(20,24,40,.05); --shadow-sm:0 2px 8px -2px rgba(20,24,40,.10); --shadow-md:0 10px 28px -12px rgba(20,24,40,.18); --shadow-lg:0 24px 60px -22px rgba(28,34,72,.30); --shadow-accent:0 10px 30px -12px rgba(63,91,214,.45); /* radii */ --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* type */ --font:'Onest',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; color-scheme:light; } [data-theme="dark"]{ --bg:#111319; --surface:#191c24; --surface-2:#20242e; --surface-3:#272c38; --border:#2a2e3a; --border-strong:#373c4a; --text:#eceef4; --text-2:#9097a8; --text-3:#626a7c; --accent:#7088f0; --accent-hover:#8397f3; --accent-press:#94a6f6; --accent-soft:#1e2640; --accent-softer:#191f33; --accent-text:#9fb0ff; --accent-2:#b29bf0; --accent-2-soft:#241f33; --on-accent:#ffffff; --live:#3fd79a; --live-soft:#16332a; --warn:#e0a45c; --danger:#ef6a61; --tile-1:#3a55d4; --tile-2:#6a4fd6; --shadow-xs:0 1px 2px rgba(0,0,0,.30); --shadow-sm:0 2px 10px -2px rgba(0,0,0,.45); --shadow-md:0 12px 30px -14px rgba(0,0,0,.6); --shadow-lg:0 28px 64px -24px rgba(0,0,0,.7); --shadow-accent:0 12px 34px -14px rgba(63,91,214,.55); color-scheme:dark; } /* provider accents — constant across themes */ :root{ --p-gpt:#10a37f; --p-claude:#d97757; --p-gemini:#4e7fff; --p-pplx:#20b8cd; --p-grok:#8b8f99; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; } ::selection{background:var(--accent-soft);color:var(--accent-text);} /* shared atoms ------------------------------------------------ */ .mono{font-family:var(--mono);} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font);font-weight:600;font-size:14px;line-height:1; padding:11px 18px;border-radius:var(--r-pill);border:1px solid transparent; cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .08s; white-space:nowrap;text-decoration:none; } .btn:active{transform:translateY(.5px);} .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent);} .btn-primary:hover{background:var(--accent-hover);} .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong);} .btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3);} .btn-soft{background:var(--accent-soft);color:var(--accent-text);} .btn-soft:hover{background:var(--accent-softer);} .pill{ display:inline-flex;align-items:center;gap:7px; font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--text-2);border:1px solid var(--border); } .live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);position:relative;flex-shrink:0;} .live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--live);opacity:.4;animation:llm-pulse 2.4s ease-out infinite;} @keyframes llm-pulse{0%{transform:scale(.7);opacity:.55;}70%{transform:scale(1.25);opacity:0;}100%{opacity:0;}} @media (prefers-reduced-motion:reduce){.live-dot::after{animation:none;}} /* provider dot */ .pdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .pdot.gpt{background:var(--p-gpt);} .pdot.claude{background:var(--p-claude);} .pdot.gemini{background:var(--p-gemini);} .pdot.pplx{background:var(--p-pplx);} .pdot.grok{background:var(--p-grok);} /* thin scrollbars */ .scroll{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;} .scroll::-webkit-scrollbar{width:9px;height:9px;} .scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:2px solid transparent;background-clip:padding-box;} .scroll::-webkit-scrollbar-thumb:hover{background:var(--text-3);background-clip:padding-box;}