[WIP] Add design tokens for colors in CSS

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

App summary & goals

Soul Ink — front-end only (React + TypeScript).
An emotionally safe, minimalist journaling front-end with a visible, animated companion agent that reacts to the user and quietly performs tasks in the UI. Design is inspired by Google’s color palette (not copied), glassmorphic cards, smooth micro-interactions, and minimal visual noise.

Primary goals:

1. Calm, safe UX for journaling and reflection.
2. A lovable, non-intrusive animated agent (multi-dotted ghost/water with eyes) that moves and reacts.
3. Production-level frontend code: reusable components, typed props, CSS Modules, performance-first.
4. Accessible and responsive across desktop/tablet/phone.
5. Excellent animations and smooth feel without causing layout jank.

---

Design tokens (single source of truth)

Provide these as src/styles/designTokens.css (CSS variables) or as a TypeScript theme object.

Colors (Google-inspired):

• --g-blue: #1a73e8; (Primary)
• --g-red: #ea4335;
• --g-yellow: #fbbc05;
• --g-green: #34a853;
• --bg: #0f1724; (or light mode #ffffff) — support dark/light.
• --glass-bg: rgba(255,255,255,0.06);
• --glass-border: rgba(255,255,255,0.12);
• --muted: rgba(255,255,255,0.6);
• --accent: var(--g-blue);

Spacing & typography:

• base spacing: 4px (scale: 4,8,12,16,24,32,48)
• font stack: Inter, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif
• font sizes: --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:28px;
• border radius: --radius-sm:8px; --radius-md:16px; --radius-lg:24px;

Glassmorphism guidelines:

• Use a subtle blur: backdrop-filter: blur(8px) saturate(120%);
• Slight translucent bg: background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
• Soft border: border: 1px solid var(--glass-border);
• Shadow: subtle box-shadow: 0 6px 24px rgba(2,6,23,0.35); (tweak for light/dark modes)

---

Stack & libs (frontend only)

• React 18 + TypeScript
• Vite (recommended) for fast dev + production build
• React Router v6
• State: Zustand (lightweight) or React Context for auth/preferences; memoized selectors
• CSS: CSS Modules (.module.css), no global style leakage; design tokens in one CSS file
• Animations: Framer Motion for component transitions; requestAnimationFrame for agent physics (custom)
• Canvas rendering: HTMLCanvasElement for agent dotted water effect (for performance)
• Avatar animations: Lottie for facial micro-expressions (small files)
• Icons: Material Icons (SVG), custom minimal icons as components
• Testing: Jest + React Testing Library, E2E with Playwright (visual tests)
• Accessibility: use react-aria concepts; ARIA labels and keyboard shortcuts
• Bundling optimizations: code-splitting, lazy load heavy assets (Lottie, canvas controller)

---

Folder structure (suggestion)

src/
  assets/
    lottie/
    svg/
  components/
    ui/            // primitive UI elements (Button, Input, Card, Icon)
    layout/        // Header, Footer, Shell, Nav
    agent/         // Avatar, CanvasAgent, AgentController
    journal/       // JournalEditor, JournalList, EntryCard
    preferences/   // PreferencesForm, AvatarPicker
    pages/
      Intro/
      Preferences/
      Home/
      Journal/
  hooks/
    useAgent.ts
    useDebounce.ts
    useLocalDB.ts
  routes/
    index.tsx
  styles/
    designTokens.css
  utils/
    animations.ts
    validators.ts
  App.tsx
  main.tsx

---

Component strategy & guidelines

• Keep UI primitives in components/ui/ and small (Button, Input, Icon). All use CSS Modules and accept className prop.
• Use composition not inheritance: build higher-level components by composing primitives.
• Strong typing: every component has exported Props interface.
• Re-usability: Avoid duplication; create Card and GlassCard components that accept slots.
• Performance: memoize pure components with React.memo and hooks with stable deps.
• CSS Modules: prefix classname with component name; use BEM-like structure if helpful.
• Module CSS naming: Component.module.css — avoid deep selectors.

---

Page-by-page detailed spec

1) Intro — minimalist sign in / sign up

Goal: calm, privacy-first onboarding.

Layout:

• Full-screen glassmorphic center card with app logo + agent idle animation beside it (miniature).
• Split: left (marketing microcopy) | right (auth card).
• Buttons: Sign In / Sign Up primary.
• Secondary: Continue as Guest (optional). Small privacy link.

Form details:

• SignUp fields: username (handles), email, password, confirm, checkbox Store local only (no cloud) toggle.
• SignIn fields: email + password, Remember me toggle.
• Social login placeholders (Google icon + label) — just UI; not implemented backend.
• Micro-interactions: fields float labels, subtle validation, success tick motion on valid inputs.

Accessibility:

• Proper label elements and aria-describedby for errors.
• Keyboard focus ring visible.

Animations:...

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.