/* Design tokens – the ONLY place colours, type, spacing and radii are defined (docs/ui/design_system.md, UD-004). Dark theme after revai.se (UD-020, brief docs/ui/design.md by Z4): black ground, off-white text, surface levels instead of shadows. Neutral accent, no gold (UD-021: gold is Revai's brand, not Englunds'). No light theme in v1 (Martin 2026-10-15); the light values are in git history (tokens.css before UD-020). Status colours have exclusive right to hue (UD-002). Each status has three values: the pure colour (line, icon), a lighter text colour that reads on the dark tone, and the dark background tone. The PDF page stays white: marks drawn on it use the --paper-* tokens, not the dark interface colours. */ :root { color-scheme: dark; /* surfaces, darkest to lightest (revai.se: page, win, card, card-alt) */ --color-canvas: #000000; /* page background */ --color-surface: #0A0A0A; /* panels, cards, table rows */ --color-surface-sunken: #141414; /* table header, quoted evidence, the area around the drawing */ --color-surface-raised: #1C1C1C; /* chips, user bubble, selected row, hover */ --color-header: rgba(0, 0, 0, 0.78); /* sticky top bar, with backdrop blur */ /* text, three levels (UD-013: faint only for what may be missed) */ --color-ink: #F2F2F0; --color-ink-muted: #B5B5B0; --color-ink-faint: #7C7C78; /* lines */ --color-line: #1E1E1E; /* dividers, cards */ --color-line-strong: #2A2A2A; /* buttons, inputs, chips: what should show a little more */ --color-line-hover: #555555; --color-input-line: #2A2A2A; /* the edge of an input */ /* accent – neutral, no hue (UD-007, UD-021): primary button light on black, active selection, focus ring */ --color-accent: #F2F2F0; --color-accent-hover: #FFFFFF; --color-accent-soft: #1C1C1C; --color-on-accent: #000000; /* info – blue means "AI proposal, not yet reviewed" (UD-008) */ --color-info: #7C93D9; --color-info-text: #AFC0EC; --color-info-bg: #161B2E; /* status – exclusive right to hue (UD-002) */ --color-status-deviation: #E0605C; --color-status-deviation-text: #F5A6A3; --color-status-deviation-bg: #2A1215; --color-status-unclear: #D9A441; --color-status-unclear-text: #F0C989; --color-status-unclear-bg: #2E2410; --color-status-verified: #4FAE79; --color-status-verified-text: #9FDBB8; --color-status-verified-bg: #122A1D; --color-status-na: #7C7C78; --color-status-na-text: #B5B5B0; --color-status-na-bg: #141414; /* paper – the white PDF page and the marks drawn on it (frames, fills, labels): dark colours that read on white */ --paper: #FFFFFF; --paper-ink: #161A1F; --paper-on-ink: #FFFFFF; --paper-deviation: #B42318; --paper-unclear: #8A5A00; --paper-verified: #1E6B3A; --paper-na: #5C636B; --paper-info: #2F4F8F; --paper-line: #B9BEC5; /* table lines in the checklist preview */ --paper-head: #EEF0F3; /* table header on paper */ --paper-open: #FBF6E6; /* an item without a decision, on paper */ /* type (UD-005: Inter self-hosted; headings in the system's sans, nothing downloaded) */ --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --text-h1: 600 24px/32px var(--font-display); --text-h2: 600 18px/26px var(--font-display); --text-body: 400 14px/22px var(--font-sans); --text-quote: 400 13px/20px var(--font-sans); --text-label: 600 12px/16px var(--font-sans); --label-tracking: 0.04em; --ease: cubic-bezier(.2, .7, .2, 1); /* form (UD-022: radius per role; still no shadows) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius: 6px; /* badges, inputs, chips, quotes */ --radius-card: 12px; /* cards, panels, tables */ --radius-pill: 999px; /* buttons */ --radius-bubble: 16px; /* chat only (UD-016): bubbles */ --radius-capsule: 18px; /* chat only (UD-016): the input capsule */ --border: 1px solid var(--color-line); --border-strong: 1px solid var(--color-line-strong); --border-input: 1px solid var(--color-input-line); /* where a field's clickable area ends */ /* layout (UD-009): item list | selected item | PDF page */ --list-width: 340px; --pdf-width: 36%; --tree-width: 420px; --side-width: 232px; --side-mini: 60px; --topbar-height: 49px; /* the chat fills the rest of the window */ } /* paper theme (UD-045, Martin 2026-10-23): the tender page is white with black text, like the document it makes. Only the colours change; the sidebar stays dark. Status colours are the paper ones, which read on white. */ .theme-paper { color-scheme: light; --color-canvas: #FFFFFF; --color-surface: #FFFFFF; --color-surface-sunken: #F6F6F4; --color-surface-raised: #F1F1EF; --color-header: rgba(255, 255, 255, 0.86); --color-ink: #111111; --color-ink-muted: #55554F; --color-ink-faint: #8A8A84; --color-line: #ECECE8; --color-line-strong: #D4D4CF; --color-line-hover: #9C9C96; --color-input-line: #8A8A84; /* 3.5:1 on white, 3.2:1 on the field (WCAG non-text 3:1, Codex anbud review 2, 9) */ --color-accent: #111111; --color-accent-hover: #000000; --color-accent-soft: #F1F1EF; --color-on-accent: #FFFFFF; --color-info: #2F4F8F; --color-info-text: #2F4F8F; --color-info-bg: #EEF2FA; --color-status-deviation: #B42318; --color-status-deviation-text: #B42318; --color-status-deviation-bg: #FDEDEB; --color-status-unclear: #8A5A00; --color-status-unclear-text: #8A5A00; --color-status-unclear-bg: #FBF3E1; --color-status-verified: #1E6B3A; --color-status-verified-text: #1E6B3A; --color-status-verified-bg: #E9F5EE; --color-status-na: #5C636B; --color-status-na-text: #5C636B; --color-status-na-bg: #F2F3F5; /* composite tokens are resolved where they are defined, so they are restated here */ --border: 1px solid var(--color-line); --border-strong: 1px solid var(--color-line-strong); --border-input: 1px solid var(--color-input-line); background: var(--color-canvas); color: var(--color-ink); }