:root {
  /* Colors */
  --brand-100: #6842ff;
  --brand-150: #342180;
  --brand-140: #3e2899;
  --brand-40: #c3b3ff;
  --brand-30: #d2c6ff;
  --brand-160: #2a1a66;
  --brand-20: #e1d9ff;
  --brand-60: #a48eff;
  --brand-120: #5335cc;
  --brand-80: #8668ff;
  --brand-180: #150d33;
  --brand-130: #492eb3;
  --brand-200: #07050f;
  --brand-70: #957bff;
  --brand-50: #b4a1ff;
  --brand-0: #ffffff;
  --color-offwhite: #f9faff;
  --color-olive-dark: #36390d;
  --color-gray-1: #c3c5d3;
  --color-blue-accent: #2871c9;
  --color-gray-2: #abaebf;
  --color-gray-3: #c0c3d0;
  --color-gray-4: #c0c2d0;
  --color-bright-purple: #7d5cff;

  /* Typography */
  --font-primary: "Nunito", Nunito Fallback, Arial, Helvetica Neue, Helvetica;
  --font-size-xl: 24px;
  --font-size-lg: 20px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 13.3333px;
  --line-height-tight: 1.29;
  --line-height-normal: 1.50;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-31-8: 31.8px;
  --space-46: 46px;
  --space-60: 60px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.5) 4px 4px 20px 0px;
  --shadow-heavy: rgba(0, 0, 0, 0.9) 0px 14px 40px 0px;
}

# CrazyGames Design System Specification

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

## Brand Context
CrazyGames is a gaming platform with a dark mode-first, playful yet structured visual style. It uses saturated purples for action, soft rounded typography, and consistent pill-shaped buttons. The design balances fun and clarity — accessible for casual gamers, sharp enough for competitive play.

## Color Palette
- Brand 100: #6842ff — Primary buttons, CTAs
- Brand 150: #342180 — Dark accents
- Brand 140: #3e2899 — Hover backgrounds
- Brand 40: #c3b3ff — Light accents
- Brand 30: #d2c6ff — Hover fills
- Brand 160: #2a1a66 — Dark surfaces
- Brand 20: #e1d9ff — Light fills
- Brand 60: #a48eff — Link text, secondary buttons
- Brand 120: #5335cc — Hover states
- Brand 80: #8668ff — Link hover
- Brand 180: #150d33 — Page background
- Brand 130: #492eb3 — Hover/focus
- Brand 200: #07050f — Background
- Brand 70: #957bff — Highlights
- Brand 50: #b4a1ff — Secondary fills
- Brand 0: #ffffff — Text, backgrounds
- Offwhite: #f9faff — Panels, cards
- Olive Dark: #36390d — Rare accents
- Gray 1: #c3c5d3 — Hover outlines
- Blue Accent: #2871c9 — Special hover
- Gray 2: #abaebf — Hover/focus
- Gray 3: #c0c3d0 — Hover/focus
- Gray 4: #c0c2d0 — Hover/focus
- Bright Purple: #7d5cff — Hover/focus

## Typography
Font Family: "Nunito", Nunito Fallback, Arial, Helvetica Neue, Helvetica

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| Button | 24px | 400 | — | Large CTAs |
| Heading-1 | 24px | 400 | — | Title |
| Heading-1 | 24px | 700 | 1.30 | Title emphasis |
| Heading-1 | 24px | 900 | 1.29 | Strong emphasis |
| Heading-1 | 20px | 900 | 1.50 | Section headings |
| Heading-1 | 19.2px | 900 | 1.50 | Subheadings |
| Button | 16px | 800 | — | Standard button |
| Button | 16px | 400 | — | Secondary button |
| Link | 16px | 700 | 1.50 | Navigation |
| Heading-1 | 16px | 400 | 1.50 | Body heading |
| Link | 14px | 700 | 1.50 | Footer links |
| Button | 14px | 800 | — | Small button |
| Caption | 14px | 400 | 1.50 | Metadata |
| Caption | 14px | 700 | 1.50 | Metadata emphasis |
| Button | 13.3333px | 400 | — | Mini button |

## Spacing & Grid
Base: 8px
Scale: 1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 20, 24, 30, 31.8, 46, 60px
Use multiples for all padding/margin.

## Border Radius
- sm: 8px — small buttons, menus
- md: 10px — cards, thumbnails
- lg: 20px — rare large surfaces
- pill: 30px — pill buttons, inputs
- full: 50% — circular avatars

## Shadows & Depth
- Default: rgba(0,0,0,0.5) 4px 4px 20px
- Heavy: rgba(0,0,0,0.9) 0px 14px 40px — rare overlays

## Component Specifications

### Primary Button
Default:
```css
background: #6842ff;
color: #f9faff;
padding: 8px 16px;
border-radius: 30px;
border: none;
font-weight: 800;
font-size: 16px;
outline: none;
```
Hover: no change (color stable)
Focus: outline none
Active: no data
Disabled: reduce opacity to 0.5

### Secondary Button
```css
background: transparent;
color: #efeff7;
padding: 8px 16px;
border-radius: 30px;
border: 2px solid #2f3148;
font-weight: 800;
font-size: 16px;
```

### Navigation Links
Default: color #ffffff or #a48eff; no underline unless purple link
Hover: color #6842ff

### Cards
Background: dark (`#150d33`)
Radius: 10px
Shadow: rgba(0,0,0,0.5) 4px 4px 20px
Padding: multiple of 8px

## Layout & Responsive Rules
Breakpoints: 0, 95, 98, 293, 321, 330, 350, 481, 585, 600, 615, 650, 700, 750, 1082, 1200, 1280, 1520, 1550, 1600, 1910px

## Interaction Rules
Transitions: 150ms ease for state changes
Focus: outline none unless specified

## DO List
- Use only colors from palette
- Maintain 8px spacing grid
- Use Nunito for all text
- Keep pill buttons at 30px radius
- Default dark mode backgrounds
- Keep hover/focus colors in purple/blue accents

## DON'T List
- Don't introduce new colors
- Don't mix sharp corners with rounded
- Don't use heavy shadow everywhere
- Don't change font family
- Don't use underline on non-link text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #6842ff;
  color: #f9faff;
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #6842ff; }
.btn-primary:focus { outline: none; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #efeff7;
  padding: 8px 16px;
  border-radius: 30px;
  border: 2px solid #2f3148;
  font-weight: 800;
  font-size: 16px;
}
```

Card:
```css
.card {
  background: #150d33;
  border-radius: 10px;
  box-shadow: rgba(0,0,0,0.5) 4px 4px 20px;
  padding: 16px;
}
```