added visual styling suggestions to the todo.md file; referenced todo.md in CLAUDE.md

CLAUDE.md

@@ -62,6 +62,7 @@ Example:
 
 ## Development Notes
 
+- there is a todo.md file which contains some desired changes
 - Almost everything is subject to change (architecture, structure, design)
 - The frontend currently operates completely standalone
 - Focus is on simplicity and performance for common use cases

todo.md

@@ -165,6 +165,86 @@ When a cell or range is selected, show a compact set of floating action buttons
 
 ---
 
+## 13. Visual Design & Styling
+
+The goal is intentional minimalism — not bare HTML. The current stylesheet has good structural foundations but is visibly unfinished: placeholder colours throughout, a content-template base, and unstyled interactive elements. Items are ordered so that each one builds on the previous.
+
+### Foundational
+
+- [ ] **13.1 Establish a CSS design token set**
+
+  Define all colours, spacing, and radii as CSS custom properties on `:root` before touching anything else. Suggested palette:
+  - `--color-bg: #f9fafb` (page background)
+  - `--color-surface: #ffffff` (cell / panel background)
+  - `--color-border: #e5e7eb` (grid lines, panel edges)
+  - `--color-header-bg: #f3f4f6` (row/column headers)
+  - `--color-text: #111827` (primary text)
+  - `--color-text-muted: #6b7280` (header labels, hints)
+  - `--color-accent: #3b82f6` (focus ring, selection border)
+  - `--color-accent-subtle: #eff6ff` (selection fill, hover tint)
+
+- [ ] **13.2 Strip out content-template CSS**
+
+  The stylesheet was adapted from a blog template. Remove or replace:
+  - `max-width: 600px` on `body` — clips the table on most screens; a spreadsheet should use available width
+  - `h1`, `h2`, `h3` type scale — not used in the app
+  - `line-height: 1.5em` on `body` — intended for prose, not a grid
+  - `a` tag styles (`text-decoration`, `color: #09f`) — not relevant to the app chrome
+
+- [ ] **13.3 Replace all placeholder colours**
+
+  Several elements have placeholder colours that were clearly never updated:
+  - `#controls-left`: `background-color: pink` → `var(--color-surface)`
+  - `#controls-bottom`: `background-color: lightblue` → `var(--color-surface)`
+  - `#main-logo`: `background-color: lightblue` → transparent (let the SVG stand alone)
+  - `.control-group`: `background-color: lightgreen` → remove; use spacing to separate groups
+
+- [ ] **13.4 Change grid lines from black to the border token**
+
+  Replace `border: 1px solid black` on `td, th` with `border: 1px solid var(--color-border)`. This is the single highest-impact change to the table's appearance.
+
+### Typography
+
+- [ ] **13.5 Switch to a system font stack**
+
+  Replace the current `'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif` with `system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`. This makes the app feel native on each platform rather than web-circa-2010.
+
+- [ ] **13.6 Use monospace for cell values**
+
+  Numbers in a proportional font look accidental; numbers in a monospace font look deliberate. Apply `font-family: 'SF Mono', ui-monospace, 'Fira Code', monospace` to `td input` and use a slightly smaller size (around `0.875rem`) relative to the header labels.
+
+### Grid & Cells
+
+- [ ] **13.7 Make inputs fill their cells**
+
+  `td input` currently has a fixed `width: 80px`, leaving dead space in the `<td>` that does not respond to clicks. Set `width: 100%` and ensure `box-sizing: border-box` so the input expands to fill the full cell width.
+
+- [ ] **13.8 Refine hover and focus states**
+
+  Current states (`#ccc` hover, `#ccf` focus background) are heavy and generic. Suggested approach:
+  - Hover: `var(--color-accent-subtle)` — a very light tint
+  - Focus: remove the background change entirely; rely on the `smartborder` ring (13.9) as the focus indicator, which avoids the "form field in a table" feeling
+
+- [ ] **13.9 Style the `smartborder` selection ring**
+
+  The `smartborder` concept (an absolutely-positioned overlay extending ~2px beyond the cell boundary) is the right approach — it mirrors how professional spreadsheets handle selection. Replace the current `3px solid blue` with `2px solid var(--color-accent)` and ensure `pointer-events: none` so it does not interfere with clicking adjacent cells.
+
+- [ ] **13.10 Style the `smartborder` action buttons**
+
+  The range-action buttons (extend, fill, move, empty, delete, copy) are currently unstyled blue circles. Redesign as small, clean pill buttons: white background, `var(--color-border)` border, `var(--color-text)` icon or label, with a shadow on hover. Size them to be comfortably tappable (minimum 32×32px touch target).
+
+- [ ] **13.11 Differentiate row and column headers**
+
+  Apply `background: var(--color-header-bg)` and `color: var(--color-text-muted)` to `th`. Remove bold weight — a medium-weight muted label reads as a header without competing with cell content.
+
+### Control Panel & Chrome
+
+- [ ] **13.12 Redesign the panel toggle buttons**
+
+  `#left-controls-button` and `#bottom-controls-button` currently render as `xx-large` bold unicode arrows with a 2px border radius — too raw. Replace with small, refined pill or tab buttons: consistent padding, `var(--color-border)` border, `border-radius: 6px`, normal font weight, subtle hover state.
+
+---
+
 ## 9. Touch Support
 
 - [ ] **9.1 Make cells tap-friendly**