Add design system and refactor styles; update HTML to use design tokens

[darrenintr]

Motivation

• Introduce a shared design token layer to standardize colors, spacing and typography across pages.
• Refresh the UI from a dark, bespoke stylesheet toward a lighter, token-driven layout to modernize the flashcards and history notes screens.
• Align component styles (flashcards, feature cards, tables, wordle) to the new design tokens for easier future theming and maintenance.

Description

• Added a new design-system.css file that declares CSS custom properties (tokens) and basic global rules.
• Updated index.html and coldwarnotes.html to include design-system.css and reordered stylesheet includes so components consume the tokens.
• Heavily refactored main.css to use the new tokens, simplify layout rules, and change spacing/visuals (sidebar, hero, cards, tables, wordle, update logs).
• Adjusted flashcards.css to align flashcard appearance with the design tokens and applied several visual and spacing changes to the flashcard components.

Testing

• No automated tests were run for this change.

---

Codex Task