/* ===================================================================== AgentOS Web: the theme tokens. The ONE place a colour, a font, a size or a radius is decided. Restyle for a client by editing this file only (THEME.md). Light is the base; dark overrides follow via prefers-color-scheme and an explicit data-theme="dark" | "light" on . Loaded first by every page: login.html, enroll.html, index.html. ===================================================================== */ :root { /* --- brand accent (the one colour the product "is") --- */ --accent: #0f766e; /* deep teal */ --accent-hover: #0b5f59; --accent-soft: #e0f2f0; /* tint behind selected items */ --accent-ink: #ffffff; /* text on the accent */ /* --- surfaces (warm paper) --- */ --bg: #f6f5f1; /* page */ --surface: #ffffff; /* panes, cards */ --surface-2: #f0efea; /* inset areas, tool activity */ --surface-3: #e6e4dd; /* hover */ --border: #dcdad2; --border-strong: #b9b6ab; /* --- ink --- */ --ink: #1d1c1a; --ink-2: #55534d; /* secondary text */ --ink-3: #6f6c63; /* muted, meta */ /* --- semantic --- */ --ok: #2f7d4f; --warn: #b7791f; --danger: #b42318; --danger-soft: #fde8e6; --warn-soft: #fbf0d9; --ok-soft: #e3f3e8; /* --- conversation bubbles --- */ --bubble-user: #e7eef7; --bubble-user-ink: #1d1c1a; --bubble-assistant: #ffffff; /* --- type (system stack, no downloads) --- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* UX pass item 7: everything moved up one step. The old base was 15px with 12/13px secondary text, which read as a dashboard; a business owner reading a piece of work needs a document. Nothing outside this block changed to make that happen - every size on the page is one of these five tokens. */ --fs-xs: 0.8125rem; /* 13 - was 12 */ --fs-sm: 0.875rem; /* 14 - was 13 */ --fs-md: 1rem; /* 16 - was 15 */ --fs-lg: 1.25rem; /* 20 - was 18 */ --fs-xl: 1.625rem; /* 26 - was 24 */ --lh: 1.55; /* --- spacing scale --- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* --- radius --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* --- layout --- */ --pane-left: 296px; --pane-right: 400px; --topbar-h: 56px; /* The reading measure of the conversation. Text that runs the full width of a 1900px screen is unreadable; this is what keeps the middle column a column. */ --measure: 760px; /* --- focus ring --- */ --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #3fb8b0; --accent-hover: #62cfc8; --accent-soft: #163b38; --accent-ink: #0b1a19; --bg: #141514; --surface: #1c1d1c; --surface-2: #232523; --surface-3: #2c2e2c; --border: #2f312f; --border-strong: #4a4d4a; --ink: #ecebe6; --ink-2: #b3b1a9; --ink-3: #8f8d85; --ok: #6ccf8e; --warn: #e2b25b; --danger: #f28b82; --danger-soft: #3a1f1d; --warn-soft: #3a2f18; --ok-soft: #1c3326; --bubble-user: #24303d; --bubble-user-ink: #ecebe6; --bubble-assistant: #1c1d1c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } } :root[data-theme="dark"] { --accent: #3fb8b0; --accent-hover: #62cfc8; --accent-soft: #163b38; --accent-ink: #0b1a19; --bg: #141514; --surface: #1c1d1c; --surface-2: #232523; --surface-3: #2c2e2c; --border: #2f312f; --border-strong: #4a4d4a; --ink: #ecebe6; --ink-2: #b3b1a9; --ink-3: #8f8d85; --ok: #6ccf8e; --warn: #e2b25b; --danger: #f28b82; --danger-soft: #3a1f1d; --warn-soft: #3a2f18; --ok-soft: #1c3326; --bubble-user: #24303d; --bubble-user-ink: #ecebe6; --bubble-assistant: #1c1d1c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } /* ===================== end of tokens ===================== */