/* * Fennec AI — design tokens and base layout. * * Values read from the supplied light/dark comps. Two themes over one set of * variables, so every component is written once: `[data-theme]` on swaps * the palette and nothing else re-declares a colour. * * The sidebar is dark in BOTH themes — that is what the comps show, so it gets * its own fixed tokens rather than following the theme. */ :root { /* light */ --bg: #ffffff; --bg-elevated: #f7f7f8; --bg-card: #f7f7f8; --bg-card-hover: #ececf1; --text: #353740; --text-strong: #202123; --text-muted: #6e6e80; --border: #e5e5e6; --border-strong: #d9d9e3; --composer-bg: #ffffff; --composer-shadow: 0 0 12px rgba(0, 0, 0, 0.08); --fade: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 60%); /* fixed across themes */ --sidebar-bg: #202123; --sidebar-text: #ececf1; --sidebar-muted: #c5c5d2; --sidebar-border: #4d4d5c; --sidebar-hover: #2a2b32; --accent: #10a37f; --danger: #ef4146; --radius: 6px; --radius-lg: 8px; --sidebar-w: 260px; --content-max: 720px; --font: "Söhne", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-theme="dark"] { --bg: #343541; --bg-elevated: #444654; --bg-card: #3e3f4b; --bg-card-hover: #4a4b57; --text: #ececf1; --text-strong: #ffffff; --text-muted: #8e8ea0; --border: #4d4d5c; --border-strong: #565869; --composer-bg: #40414f; --composer-shadow: 0 0 15px rgba(0, 0, 0, 0.1); --fade: linear-gradient(180deg, rgba(52, 53, 65, 0) 0%, #343541 60%); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea { font-family: inherit; font-size: inherit; color: inherit; } a { color: inherit; } /* Visible focus ring on keyboard navigation only — a permanent ring on click looks broken, and removing it entirely strands keyboard users. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 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; } .hidden { display: none !important; }