1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
//! Design-system tokens — the Rust source of truth for the browser app's
//! visual language. The owner edits the design system HERE (Rust consts),
//! not by hand-tweaking CSS.
//!
//! [`root_tokens_css`] emits a `:root { … }` block from these consts;
//! [`super::mount`] injects it into `<head>` (as `<style id="lh-tokens">`)
//! ahead of the static `web/styles.css`. Because CSS custom properties
//! resolve at *use* time, declaration order doesn't matter — the structural
//! / component rules in `styles.css` read `var(--bg)` etc. and pick up
//! whatever this block declares.
//!
//! Scope today: TOKENS only. The structural rules still live in
//! `styles.css` (a full CSS-in-Rust port of every component rule is a large
//! follow-up, deliberately NOT attempted here). The win this delivers: a
//! token change is a Rust edit, and the values can't silently drift from a
//! magic number buried in the stylesheet.
//!
//! ZERO visual regression: every value below is copied verbatim from the
//! `:root` block that previously lived at the top of `styles.css`, plus a
//! small named scale lifted from numbers that were already repeated
//! throughout the file (the spacing steps, the z-index layers).
// ---- Palette (monochrome brutalist) ------------------------------------
/// App background.
pub const BG: &str = "#080808";
/// Raised panel surface (cards, dialogs).
pub const PANEL: &str = "#0f0f0f";
/// Second panel tone.
pub const PANEL_2: &str = "#161616";
/// Hairline border colour.
pub const BORDER: &str = "#1e1e1e";
/// Primary foreground text.
pub const FG: &str = "#c8c8c8";
/// Muted / secondary text.
pub const MUTED: &str = "#555";
/// Accent (pure white) — emphasis, focus rings, active chips.
pub const ACCENT: &str = "#fff";
/// User-input text tone.
pub const USER: &str = "#777";
/// Error / danger tone.
pub const ERROR: &str = "#a05050";
// ---- Typography --------------------------------------------------------
/// The one font stack — IBM Plex Mono with monospace fallbacks. Referenced
/// by `--font-mono`; the historical hardcoded copies in `styles.css` now
/// read this token.
pub const FONT_MONO: &str =
"'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace";
// ---- Chrome ------------------------------------------------------------
/// THE uniform chrome margin — the spacing around the header's admin
/// button (above / below / right of it). Every piece of app chrome (header
/// padding, footer/terminal padding, transcript gutters) derives from this
/// ONE constant so header and footer geometry can never drift. Preserve
/// exactly — recently fixed.
pub const CHROME_PAD: &str = "16px";
// ---- Spacing scale -----------------------------------------------------
// A small named scale lifted from the values already repeated across the
// stylesheet. Used only where it removes real duplication; not every gap
// is forced onto the scale.
/// 4px — tightest rhythm (terminal body gap, fine row gaps).
pub const SPACE_1: &str = "4px";
/// 8px — default small gap (button rows, modal close offsets).
pub const SPACE_2: &str = "8px";
/// 12px — turn indent, transcript inter-turn gap, dialog row gaps.
pub const SPACE_3: &str = "12px";
/// 20px — modal/overlay backdrop padding, dialog inner padding.
pub const SPACE_4: &str = "20px";
// ---- Z-index layers ----------------------------------------------------
// The overlay stack, lowest → highest. Previously scattered as bare
// numbers; named so the ordering is legible at a glance.
/// Sticky site header.
pub const Z_HEADER: &str = "30";
/// Files modal + admin panel backdrop.
pub const Z_MODAL: &str = "100";
/// Brand dropdown menu.
pub const Z_MENU: &str = "120";
/// DISPLAY framebuffer overlay (above files, below api-key).
pub const Z_DISPLAY: &str = "140";
/// API-key modal.
pub const Z_API_KEY: &str = "150";
/// Emit the `:root { … }` design-token block. Injected into `<head>` at
/// mount; the static stylesheet's component rules consume these `var()`s.
pub