Summary
`app/frontend/src/App.css` defines the same design tokens in two parallel blocks with different naming conventions, meaning neither is authoritative and both can drift out of sync.
The `@theme` block (lines 3-45, for Tailwind v4) uses:
- `--color-accent`, `--color-accent-hover`, `--color-accent-dim`
- `--color-surface-raised`, `--color-surface-overlay`, `--color-surface-selected`
- `--color-sep`, `--color-sep-strong`
- `--radius-xs` through `--radius-xl`
The `root` block (lines 48-119, used by the hand-written CSS below it) uses:
- `--accent`, `--accent-hover`, `--accent-dim`
- `--surface-raised`, `--surface-overlay`, `--surface-selected`
- `--sep`, `--sep-strong`
- `--r-xs` through `--r-xl`
Because Tailwind v4 hoists `@theme` variables onto `:root`, a component can accidentally use either prefix and it will silently work today. There is already one case of this: `.term-branch-tag` (line 258) references `var(--color-sep-strong)` from `@theme` while the surrounding CSS uses `var(--sep-strong)` from `:root`.
How to fix
Pick one naming convention and remove the other. The safest path is to keep the `:root` variable names (since they are used in most of the hand-written CSS below them) and remove the redundant definitions from `@theme`, leaving only Tailwind utility-specific tokens in `@theme`. Then fix `.term-branch-tag` to use `var(--sep-strong)`.
Files
- `app/frontend/src/App.css` (lines 3-45 `@theme`, lines 48-119 `:root`, line 258 `.term-branch-tag`)
Summary
`app/frontend/src/App.css` defines the same design tokens in two parallel blocks with different naming conventions, meaning neither is authoritative and both can drift out of sync.
The `@theme` block (lines 3-45, for Tailwind v4) uses:
The `root` block (lines 48-119, used by the hand-written CSS below it) uses:
Because Tailwind v4 hoists `@theme` variables onto `:root`, a component can accidentally use either prefix and it will silently work today. There is already one case of this: `.term-branch-tag` (line 258) references `var(--color-sep-strong)` from `@theme` while the surrounding CSS uses `var(--sep-strong)` from `:root`.
How to fix
Pick one naming convention and remove the other. The safest path is to keep the `:root` variable names (since they are used in most of the hand-written CSS below them) and remove the redundant definitions from `@theme`, leaving only Tailwind utility-specific tokens in `@theme`. Then fix `.term-branch-tag` to use `var(--sep-strong)`.
Files