/* Three colour schemes, one attribute. The workspace shows a tenant's own page in an iframe next to ChatCMS's own panels, and against a bright site the bright chrome stops reading as chrome: the reader cannot tell where their page ends and our UI begins. So the chrome has three grounds -- bright, a mid graphite that sits between any page and either extreme, and an Adobe-ish dark -- selected by `data-theme` on , which the server renders from the theme cookie so the first paint is already right (a class flipped by JS on DOMContentLoaded is a flash of the wrong theme on every single navigation). Every colour the chrome paints is a token below, and all three blocks declare the same set: a token defined in `:root` alone would silently keep its bright value on a dark ground, which is invisible in review and obvious to a user. `tests/test_web_theming.py` enforces both that completeness and a contrast floor for every text-on-ground pair, because nobody can eyeball 50 colours x 3 themes. Two things deliberately do NOT follow the theme, and the line between them is "chrome or content": the little pictures of the starter sites (.template-preview*) and the iframe's own backdrop stand in for somebody else's page, and re-tinting those would be lying about what the site looks like. The preview overlay (static/overlay/overlay.css) is a third: it lives inside the tenant's document and is already built to stay legible over anything. */ :root { color-scheme: light; /* ground and ink */ --bg: #f4f7fb; --surface: #ffffff; --surface-muted: #f8fafc; --surface-sunken: #eef2f8; --field: #ffffff; --ink: #172033; --label: #424d63; --muted: #657087; --line: #dfe5ef; --line-strong: #cbd4e2; --chip: #edf0f5; --chip-ink: #59647a; --mark: #fde9a9; --mark-ink: #172033; /* brand */ --brand: #3156d3; --brand-strong: #2545b4; --brand-soft: #e9edff; --brand-line: #cad5f6; --brand-ink: #344574; --on-brand: #ffffff; --wash-user: #e7ecff; --wash-admin: #eee8ff; --focus-ring: rgba(49, 86, 211, .28); --focus-soft: rgba(49, 86, 211, .12); /* status */ --success: #147a55; --success-soft: #e7f6ef; --success-line: #a9e7c1; --warning: #a15c00; --warning-soft: #fff3d9; --warning-line: #efd89c; --danger: #c0343e; --danger-soft: #fdebed; --danger-line: #e7aeb3; --danger-wash: #fdf3f4; /* the rail: sidebar, brand block, account */ --rail: #10182b; --rail-ink: #eef2ff; --rail-muted: #9ca8c4; --rail-line: #38445e; --rail-hover: rgba(255, 255, 255, .09); --rail-accent: #7890ff; --rail-avatar: #293755; /* output that is content, not chrome */ --terminal: #111827; --terminal-ink: #d5deef; --terminal-muted: #7e8aa2; --tooltip: #1b2438; --tooltip-ink: #eef2ff; /* depth */ --shadow: 0 12px 32px rgba(31, 42, 68, .08); --shadow-md: 0 16px 40px rgba(23, 32, 51, .18); --shadow-lg: 0 28px 80px rgba(15, 23, 42, .28); --scrim: rgba(15, 23, 42, .55); --curtain: rgba(247, 249, 252, .93); --bar: rgba(255, 255, 255, .97); /* the preview mat and the diff */ --stage: #e8edf5; --diff-add: #e9f7ef; --diff-del: #fdecee; --diff-add-word: #a9e7c1; --diff-del-word: #f9c9cf; } [data-theme="mid"] { color-scheme: dark; /* ground and ink */ --bg: #4a505b; --surface: #575e6a; --surface-muted: #4f5661; --surface-sunken: #454b55; --field: #3a3f49; --ink: #f2f4f8; --label: #d3d9e3; --muted: #c1c8d5; --line: #656d7b; --line-strong: #7b8492; --chip: #5b6270; --chip-ink: #e6eaf1; --mark: #d8a63f; --mark-ink: #1c1a12; /* brand */ --brand: #aabaff; --brand-strong: #c3cdff; --brand-soft: #444d6e; --brand-line: #6c7aa8; --brand-ink: #dbe2ff; --on-brand: #12162a; --wash-user: #5b6480; --wash-admin: #655b80; --focus-ring: rgba(170, 186, 255, .45); --focus-soft: rgba(170, 186, 255, .22); /* status */ --success: #6ede9f; --success-soft: #3c5a4b; --success-line: #5c8a72; --warning: #f0bd63; --warning-soft: #5b4c2e; --warning-line: #8a7442; --danger: #ffb0b6; --danger-soft: #5e3a3f; --danger-line: #8d5b61; --danger-wash: #4f3438; /* the rail: sidebar, brand block, account */ --rail: #333944; --rail-ink: #eef1f7; --rail-muted: #a9b2c2; --rail-line: #4c5462; --rail-hover: rgba(255, 255, 255, .10); --rail-accent: #aabaff; --rail-avatar: #4a5364; /* output that is content, not chrome */ --terminal: #23272f; --terminal-ink: #d5dae4; --terminal-muted: #8d95a3; --tooltip: #2b303a; --tooltip-ink: #eef1f7; /* depth */ --shadow: 0 12px 32px rgba(0, 0, 0, .22); --shadow-md: 0 16px 40px rgba(0, 0, 0, .32); --shadow-lg: 0 28px 80px rgba(0, 0, 0, .45); --scrim: rgba(12, 14, 18, .60); --curtain: rgba(74, 80, 91, .93); --bar: rgba(79, 86, 97, .97); /* the preview mat and the diff */ --stage: #3e444e; --diff-add: #33503f; --diff-del: #533338; --diff-add-word: #487053; --diff-del-word: #855058; } [data-theme="dark"] { color-scheme: dark; /* ground and ink */ --bg: #1b1d21; --surface: #26292e; --surface-muted: #212429; --surface-sunken: #1a1c20; --field: #16181b; --ink: #dfe3ea; --label: #b9c0cb; --muted: #939bab; --line: #363a41; --line-strong: #494e57; --chip: #343841; --chip-ink: #c3cad6; --mark: #7a5a12; --mark-ink: #ffe9b0; /* brand */ --brand: #7d97ff; --brand-strong: #9db0ff; --brand-soft: #2a3252; --brand-line: #46527e; --brand-ink: #c7d2ff; --on-brand: #0d1226; --wash-user: #232a44; --wash-admin: #2a2344; --focus-ring: rgba(125, 151, 255, .42); --focus-soft: rgba(125, 151, 255, .22); /* status */ --success: #5fd39a; --success-soft: #1d3a2c; --success-line: #326b4f; --warning: #e6ab52; --warning-soft: #3d2f16; --warning-line: #6b5326; --danger: #f4848d; --danger-soft: #3f2126; --danger-line: #703a41; --danger-wash: #33191d; /* the rail: sidebar, brand block, account */ --rail: #131519; --rail-ink: #e7ebf3; --rail-muted: #98a1b2; --rail-line: #2c3038; --rail-hover: rgba(255, 255, 255, .08); --rail-accent: #7d97ff; --rail-avatar: #2f3542; /* output that is content, not chrome */ --terminal: #121417; --terminal-ink: #cfd6e2; --terminal-muted: #7d8492; --tooltip: #2c313a; --tooltip-ink: #e7ebf3; /* depth */ --shadow: 0 12px 32px rgba(0, 0, 0, .50); --shadow-md: 0 16px 40px rgba(0, 0, 0, .60); --shadow-lg: 0 28px 80px rgba(0, 0, 0, .70); --scrim: rgba(0, 0, 0, .66); --curtain: rgba(27, 29, 33, .94); --bar: rgba(33, 36, 41, .97); /* the preview mat and the diff */ --stage: #101216; --diff-add: #1d3a2c; --diff-del: #3f2126; --diff-add-word: #2f6a4c; --diff-del-word: #7a3c44; } :root { --radius: 14px; --sidebar: 248px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { min-width: 320px; background: var(--bg); } body { margin: 0; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px 18px; background: var(--rail); color: var(--rail-ink); z-index: 20; } .brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; color: var(--rail-ink); } .brand:hover { text-decoration: none; } /* The logo keeps its colours in all three themes -- a mark that re-tints with the UI is not a mark. Same for .portal-identity below and for the .template-preview* thumbnails, which are pictures of somebody else's site. */ .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(145deg, #6b83ff, #3156d3); font-weight: 800; box-shadow: 0 5px 18px rgba(63, 91, 220, .4); } .brand strong, .brand small, .account strong, .account small { display: block; } .brand strong { letter-spacing: -.02em; } .brand small, .account small { color: var(--rail-muted); font-size: 12px; } .primary-nav { display: grid; gap: 6px; } .primary-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px; color: var(--rail-muted); font-weight: 600; } .primary-nav a:hover, .primary-nav a.active { color: var(--rail-ink); background: var(--rail-hover); text-decoration: none; } .primary-nav a.active { box-shadow: inset 3px 0 var(--rail-accent); } .sidebar-foot { margin-top: auto; display: grid; gap: 14px; } .account { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 8px 10px; border-radius: 9px; color: var(--rail-ink); } .account:hover, .account.active { background: var(--rail-hover); text-decoration: none; } .account.active { box-shadow: inset 3px 0 var(--rail-accent); } /* Language switcher. A segmented control of real submit buttons, not a