/* ─────────────────────────────────────────────────────────────── Agent Studio demos — shared design language The tokens and base primitives every demo on this site links first. A demo's own style.css layers on top of this and never redeclares a token; the landing page uses nothing but what is in here. Fonts are loaded by each page's (Bricolage Grotesque for display, Inter Tight for body, IBM Plex Mono for code) — this file only names them. ─────────────────────────────────────────────────────────────── */ /* ── Palette ────────────────────────────────────────────────────── One declaration per token, both themes inside it. light-dark() reads the element's own color-scheme, so the manual toggle is a single line — :root[data-theme="dark"] { color-scheme: dark } — and there is no second copy of the palette to drift out of sync. Native controls follow along for free. ─────────────────────────────────────────────────────────────────── */ :root { color-scheme: light dark; --ink: light-dark(#14162a, #eceefb); --ink-2: light-dark(#3d4160, #b3b8d6); --ink-3: light-dark(#6b7093, #8b90b5); --paper: light-dark(#eef0f5, #0d0e1c); --surface: light-dark(#fcfcfe, #16182b); --surface-2: light-dark(#f4f5fa, #1d1f34); --line: light-dark(#d7dae6, #2c2f4a); --line-strong: light-dark(#b6bbcf, #3f4364); /* ink-violet: links, primary action */ --accent: light-dark(#2c2ae0, #9c9bff); --accent-soft: light-dark(#e7e7fb, #23234a); /* the fold */ --crease: light-dark(#d24a86, #f08cba); --ok: light-dark(#00806b, #1fa38d); --warn: light-dark(#a8600b, #d9962f); --over: light-dark(#ce1b44, #f26a8d); --radius: 4px; --shadow: 0 1px 0 var(--line), light-dark(0 12px 32px -24px rgba(20, 22, 42, 0.5), 0 16px 40px -28px #000); --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif; --body: "Inter Tight", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; } /* the toggle's only job: pin the scheme the palette above resolves against */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } code, .mono { font-family: var(--mono); font-size: 0.86em; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--surface); padding: 8px 14px; } .skip:focus { left: 8px; top: 8px; }