:root {
  /* Colors */
  --color-white: #ffffff;
  --color-charcoal-dark: #1f2023;
  --color-transparent-lavender: #e8ddff;
  --color-text-highlight: #accef7;
  --color-inverted-secondary-text: #f6f6f6;
  --color-positive-green: #219464;
  --color-negative-red-orange: #e34f2f;
  --color-chrome-active-text: #ffffff;
  --color-chart-axis-label: #626266;
  --color-disabled-text: #8f8f91;
  --color-chrome-hover: #463dbb;
  --color-chart-axis-line: #e9e9e9;
  --color-primary-text: #2a2a2f;
  --color-chart-highlight-purple: #4f44e0;
  --color-chrome-active-background: #322e6f;

  /* Typography */
  --font-heading: "Garnett Medium", sans-serif;
  --font-body: "Garnett Regular", sans-serif;
  --font-caption: "Apercu Pro", sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;
  --space-152: 152px;
  --space-160: 160px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-pill: 100px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-purple-lg: rgba(218, 208, 255, 0.5) 0px 40px 24px -32px;
  --shadow-purple-sm: rgba(218, 208, 255, 0.5) -1px 1px 4px 0px;
}

# Mixpanel Design System Specification

You are a Mixpanel design expert. Build UIs matching their visual language exactly.

## Brand Context
Mixpanel's design is data-first, high-contrast, and professional. It uses a restrained palette with functional greens/reds and a signature purple for highlights. Typography is modern sans-serif with clear hierarchy.

## Color Palette
- White: #ffffff — Primary background
- Charcoal Dark: #1f2023 — Text, dark sections
- Transparent Lavender: #e8ddff — Soft background tints
- Text Highlight: #accef7 — Inline emphasis
- Inverted Secondary Text: #f6f6f6 — On dark backgrounds
- Positive Green: #219464 — Success states
- Negative Red-Orange: #e34f2f — Error states
- Chrome Active Text: #ffffff — On active UI elements
- Chart Axis Label: #626266 — Chart labels
- Disabled Text: #8f8f91 — Disabled UI states
- Chrome Hover: #463dbb — Hover state for nav/chrome
- Chart Axis Line: #e9e9e9 — Chart dividers
- Primary Text: #2a2a2f — Body copy
- Chart Highlight Purple: #4f44e0 — Data highlights
- Chrome Active Background: #322e6f — Active nav backgrounds

## Typography
Fonts:
- Headings: "Garnett Medium", sans-serif
- Body: "Garnett Regular", sans-serif
- Captions: "Apercu Pro", sans-serif

Sizes:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 60px | 400 | 1.20 | Page titles |
| H2 | 48px | 400 | 1.20 | Section titles |
| H3 | 36px | 400 | 1.20 | Subsections |
| H4 | 28px | 400 | 1.20 | Smaller headings |
| H5 | 22px | 400 | 1.20 | UI headings |
| Body | 16px | 400 | 1.60 | Paragraphs |
| Caption | 14px | 400 | 1.20-1.50 | Labels |
| Small | 12px | 400/500 | 1.00-1.80 | Meta info |

## Spacing & Grid
Base: 8px
Scale: 4px, 5px, 8px, 10px, 16px, 24px, 32px, 40px, 80px, 152px, 160px

## Border Radius
- none: 0px — Tables
- sm: 4px — Buttons, inputs
- md: 8px — Cards
- lg: 12px — Modals
- xl: 16px — Large cards
- xxl: 24px — Containers
- pill: 100px — CTA buttons
- full: 100% — Avatars

## Shadows & Depth
- Purple large: rgba(218, 208, 255, 0.5) 0px 40px 24px -32px
- Purple small: rgba(218, 208, 255, 0.5) -1px 1px 4px 0px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #4f44e0;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #463dbb; }
.btn-primary:focus { outline: 2px solid #accef7; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: #ffffff;
  color: #4f44e0;
  padding: 10px 24px;
  border-radius: 100px;
  border: 1px solid #4f44e0;
}
.btn-secondary:hover { background: #e8ddff; }
```

### Navigation Links
```css
.nav-link {
  color: #1f2023;
  text-decoration: none;
}
.nav-link:hover {
  color: #463dbb;
}
```

### Input Fields
```css
.input {
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 16px;
}
.input:focus { border-color: #4f44e0; outline: none; }
.input:disabled { color: #8f8f91; background: #f6f6f6; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(218, 208, 255, 0.5) 0px 40px 24px -32px;
}
```

## Layout & Responsive Rules
Max content width: ~1200px
Page padding: 16px mobile / 24px desktop
Grid gap: multiples of 8px
Breakpoints:
- Mobile: <807px
- Tablet: 808px–1199px
- Desktop: >1200px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus indicators: 2px solid highlight (`#accef7`)
- Loading: dim component, keep layout stable

## DO
- Use only colors from palette
- Maintain 8px grid
- Keep headings in Garnett Medium
- Use uppercase captions with 2.4px spacing for labels
- Use purple shadows for depth

## DON'T
- Invent new colors
- Mix rounded and sharp corners
- Use heavy black shadows
- Overuse purple backgrounds
- Stretch avatars

## Code Examples

Primary Button:
```css
<button class="btn-primary">Sign Up</button>
```

Secondary Button:
```css
<button class="btn-secondary">Learn More</button>
```

Form Input:
```css
<input class="input" placeholder="Enter name" />
```