# Invest Copilot — Design System

> Dark-first, glassmorphic fintech aesthetic. Inspired by Linear, Stripe, Dribbble fintech.
> Mobile-first responsive. OKLch color space.

---

## Design Tokens

### Colors (OKLch)

```css
:root {
  /* Background */
  --bg-deep:    oklch(0.08 0.02 260);   /* near-black, slight blue tint */
  --bg-surface: oklch(0.12 0.03 260);   /* card bg */
  --bg-raised:  oklch(0.16 0.03 260);   /* elevated card */
  --bg-overlay: oklch(0.10 0.02 260 / 0.85); /* glass overlay */

  /* Borders & dividers */
  --border-subtle: oklch(0.22 0.02 260);  /* very faint border */
  --border-default: oklch(0.30 0.03 260);  /* visible border */

  /* Text */
  --text-primary:   oklch(0.96 0.005 260);  /* white-ish */
  --text-secondary: oklch(0.65 0.02 260);   /* gray */
  --text-tertiary:  oklch(0.45 0.02 260);   /* dim gray */
  --text-placeholder: oklch(0.35 0.02 260); /* placeholder text */

  /* Accents — gradient pair */
  --accent-start: oklch(0.65 0.20 262);  /* vibrant blue */
  --accent-end:   oklch(0.60 0.25 290);  /* vibrant purple */
  --accent-glow:  oklch(0.65 0.20 262 / 0.25); /* blue glow */

  /* Semantic — green (positive) */
  --positive: oklch(0.70 0.18 155);  /* emerald */
  --positive-dim: oklch(0.70 0.18 155 / 0.12);

  /* Semantic — red (negative) */
  --negative: oklch(0.60 0.22 25);   /* red */
  --negative-dim: oklch(0.60 0.22 25 / 0.12);

  /* Semantic — amber (warning) */
  --warning: oklch(0.72 0.18 70);  /* amber */
  --warning-dim: oklch(0.72 0.18 70 / 0.12);

  /* Semantic — teal (info) */
  --info: oklch(0.65 0.15 190);  /* teal */
  --info-dim: oklch(0.65 0.15 190 / 0.12);
}
```

### Spacing (4px base)

```
--space-1: 0.25rem (4px)
--space-2: 0.5rem  (8px)
--space-3: 0.75rem (12px)
--space-4: 1rem    (16px)
--space-5: 1.25rem (20px)
--space-6: 1.5rem  (24px)
--space-8: 2rem    (32px)
--space-10: 2.5rem (40px)
--space-12: 3rem   (48px)
--space-16: 4rem   (64px)
```

### Typography

| Level | Weight | Size | Family | Use |
|-------|--------|------|--------|-----|
| Display | 700 | 2.5rem (40px) | Inter | Page titles |
| H1 | 700 | 2rem (32px) | Inter | Section headers |
| H2 | 600 | 1.25rem (20px) | Inter | Sub-headers |
| H3 | 600 | 1.125rem (18px) | Inter | Card titles |
| Body | 400/500 | 1rem (16px) | Inter | Body text |
| Body-sm | 400/500 | 0.875rem (14px) | Inter | Secondary text |
| Caption | 500 | 0.75rem (12px) | Inter | Labels, timestamps |
| Mono | 500 | 1rem (16px) | JetBrains Mono | Numbers, tickers |
| Mono-sm | 500 | 0.875rem (14px) | JetBrains Mono | Small numbers |
| Mono-xs | 500 | 0.6875rem (11px) | JetBrains Mono | Micro numbers |

### Shadows & Effects

```css
--shadow-card: 0 1px 3px oklch(0 0 0 / 0.3), 0 0 1px oklch(0 0 0 / 0.5);
--shadow-raised: 0 4px 12px oklch(0 0 0 / 0.4), 0 0 1px oklch(0 0 0 / 0.5);
--shadow-glow-accent: 0 0 30px oklch(0.65 0.20 262 / 0.15);
--shadow-glow-positive: 0 0 20px oklch(0.70 0.18 155 / 0.1);
--blur-sm: blur(4px);
--blur-md: blur(8px);
--blur-lg: blur(16px);
--glass-bg: bg with backdrop-filter: blur(12px) + semi-transparent bg;
--gradient-accent: linear-gradient(135deg, var(--accent-start), var(--accent-end));
```

### Border Radius

```
--radius-sm: 0.5rem    (8px)   /* small elements, pills */
--radius-md: 0.75rem   (12px)  /* cards, buttons */
--radius-lg: 1rem      (16px)  /* large cards, modals */
--radius-xl: 1.25rem   (20px)  /* hero sections */
--radius-full: 9999px  /* pills, badges */
```

### Breakpoints

```
sm:  375px  (mobile base)
md:  768px  (tablet)
lg:  1024px (desktop)
xl:  1280px (large desktop)
```

---

## Component Specifications

### Glass Card
- bg: `--bg-surface` (oklch 0.12)
- border: `1px solid --border-subtle`
- border-radius: `--radius-lg` (12px)
- shadow: `--shadow-card`
- padding: `--space-6`
- hover: lift slightly (translateY -2px), shadow increases

### Primary Button
- bg: `--gradient-accent`
- text: white, 500 weight
- border-radius: `--radius-md`
- padding: `--space-3` `--space-6`
- hover: brightness 1.1, shadow `--shadow-glow-accent`
- active: scale 0.98

### Stat Card (small card with icon)
- bg: `--bg-raised`
- border: `1px solid --border-subtle`
- border-radius: `--radius-md`
- icon: 36x36, bg with accent tint (opacity 0.15)
- padding: `--space-4`

### Chart
- Gradient area fill under line
- Line: 2px stroke, gradient color
- Dot on last point: 6px circle with glow
- Grid lines: `--border-subtle`, dashed
- Labels: `--text-tertiary`, mono font

### Nav Pill (tab selector)
- bg: `--bg-raised`
- border: `1px solid --border-subtle`
- border-radius: `--radius-full` (pill shape)
- active item: bg with `--accent-start`, text white

### Badge/Pill
- border-radius: `--radius-full`
- padding: `2px 10px`
- font-size: `--caption`
- bg: semantic tint (positive-dim, negative-dim, etc.)
- text: semantic color

---

## Visual Design Principles

1. **Dark first** — all surfaces are dark, accents provide color
2. **Glassmorphism** — translucent cards with blur, subtle borders
3. **Gradient accents** — blue-to-purple gradients for primary actions and chart fills
4. **Spacious** — generous padding, breathing room between elements
5. **Data hierarchy** — numbers in monospace, large and prominent; labels smaller and dim
6. **Semantic color** — green for positive, red for negative, blue/purple for brand
7. **Glow effects** — subtle colored glows around key elements (charts, active states)
8. **Smooth transitions** — 150-200ms ease-out for all interactive states