:root {
  /* Colors */
  --ball-bg: #a238ff;
  --color-text-brand-hifi: #000000;
  --color-grey-200: #eaeaea;
  --transparent-bg: #ffffff80;
  --color-bg-brand-family-selected: #fff0ec;
  --color-text-brand-family: #ffffff;
  --color-border-neutral-secondary: #c2c0c4;
  --color-grey-100: #f4f4f4;
  --color-grey-600: #32323d;
  --tmp-icon-color: #6f6d71;
  --color-neutral-strong: #a2a2ad;
  --color-accent-weak: #c17aff;
  --color-bg-brand-family: #ff673d;
  --color-bg-brand-hifi: #cca555 100%;
  --color-grey-500: #52525d;
  --color-accent-light: #d09aff;
  --color-bg-brand-premium-selected: #f6ebff;
  --color-bg-inverse: #121216;
  --color-bg-tertiary-hover: #e1dde4;
  --color-accent-strong: #9333e8;
  --color-bg-tertiary: #ebe7ee;
  --color-neutral-main: #d1d1d6;
  --color-text-main: #0f0d13;
  --color-grey-800: #191922;
  --line-color: #a238ff66;
  --color-grey-700: #23232d;
  --color-intent-error: #df3c3c;
  --color-bg-brand-trio: #2f7c90;
  --color-text-disabled: #a9a6aa;
  --color-bg-brand-duo-selected: #defdfb;
  --color-bg-secondary-brand-family: #ff70284d;
  --color-bg-brand-yellow: #fcff60;
  --color-intent-success: #00b23d;
  --offer-title-bg: #00000000;
  --color-intent-warning: #ec7f11;
  --color-bg-secondary-brand-premium: #216cff4d;
  --color-bg-brand-partners: #f3f1f6e6;
  
  /* Typography */
  --font-heading-display: "Deezer Product", Tahoma;
  --font-ui: "Inter", Arial;

  /* Spacing */
  --space-xs: 12px;
  --space-sm: 28px;
  --space-md: 56px;
  --space-lg: 112px;

  /* Border Radius */
  --radius-md: 12px;
}

# Deezer Design System Specification

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

## Brand Context
Deezer’s design language is bold and purposeful, with a high-contrast purple as the primary action color. Surfaces stay clean and neutral, with pops of vivid tier-specific background colors. Typography is modular and practical, keeping UI readable and scalable.

## Color Palette
- Primary Purple: #a238ff — CTAs, primary buttons
- Off-White: #fdfcfe — Backgrounds
- Medium Violet: #9534ec — Hover/focus accents
- Black: #000000 — Hi-Fi plan text
- Grey 200: #eaeaea — Dividers
- Transparent White: #ffffff80 — Overlays
- Brand Family Selected BG: #fff0ec — Selected state highlight
- White: #ffffff — Text on primary
- Border Neutral Secondary: #c2c0c4 — Element borders
- Grey 100: #f4f4f4 — Panels
- Grey 600: #32323d — UI chrome
- Icon Grey: #6f6d71 — Icons
- Neutral Strong: #a2a2ad — Secondary text
- Accent Weak: #c17aff — Subtle highlights
- Brand Family BG: #ff673d — Tier background
- Brand Hi-Fi BG: #cca555 — Hi-Fi plan background
- Grey 500: #52525d — Text
- Accent Light: #d09aff — Hover accents
- Brand Premium Selected BG: #f6ebff — Premium highlight
- Background Inverse: #121216 — Dark mode background
- Tertiary Hover BG: #e1dde4 — Hover
- Accent Strong: #9333e8 — Strong highlight
- Tertiary BG: #ebe7ee — Card background
- Neutral Main: #d1d1d6 — Panels
- Text Main: #0f0d13 — Main text
- Grey 800: #191922 — Dark BG
- Line Color: #a238ff66 — Dividers
- Grey 700: #23232d — Nav
- Intent Error: #df3c3c — Error
- Brand Trio BG: #2f7c90 — Tier
- Text Disabled: #a9a6aa — Disabled
- Brand Duo Selected BG: #defdfb — Duo plan
- Secondary Brand Family: #ff70284d — Transparent tier accent
- Brand Yellow BG: #fcff60 — Highlight
- Intent Success: #00b23d — Success
- Offer Title BG: #00000000 — Transparent
- Intent Warning: #ec7f11 — Warning
- Secondary Brand Premium: #216cff4d — Transparent premium accent
- Brand Partners BG: #f3f1f6e6 — Partnership background

## Typography
- Headings (Display): "Deezer Product", Tahoma
- UI & Body: "Inter", Arial

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Display | 78px | 700 | — | Marketing titles |
| H1 Small | 20px | 700 | — | UI headings |
| Link | 16px | 400 | — | Nav links |
| H1 Compact | 16px | 500 | 1.56 | Compact headings |
| Button | 16px | 700 | — | Action buttons

## Spacing & Grid
Base: 8px
Scale: 12px, 28px, 56px, 112px

## Border Radius
- md: 12px — buttons

## Shadows & Depth
Flat design — no shadows. Use color contrasts to indicate depth.

## Component Specifications

### Primary Button
Default:  
background: #a238ff;  
color: #ffffff;  
padding: 12px 32px;  
border-radius: 12px;  
border: 1px solid rgba(0,0,0,0);  
font: Inter 700 16px;  
box-shadow: none.

Hover/Active/Focus: same base, outline or slight color shift (custom in UI code).  
Disabled: opacity 0.5, cursor not-allowed.

### Navigation Links
Default:  
color: #fdfcfe or #ffffff;  
font-weight: 400 or 700;  
text-decoration: none;  
Hover: maintain text color, optional underline.

### Input Fields
(Not in extracted data — define consistent border color #c2c0c4, radius 12px.)

### Cards
Background: #ebe7ee or tier-specific color, no shadow, padding multiple of spacing scale.

## Layout & Responsive Rules
- Use multiples of 8px for spacing.
- Containers adjust fluidly — align to grid.

## Interaction Rules
- State changes: 150ms ease.
- Focus rings: use line color #a238ff66.

## DO List
- Use ONLY colors from palette.
- Maintain 8px grid spacing.
- Consistent 12px corner radius on buttons.
- Use Deezer Product for display headings only.
- Keep text on primary background white.
- Use tier colors to differentiate product levels.

## DON'T List
- No shadows.
- Don’t mix sharp corners with rounded.
- Avoid colors outside palette.
- Don’t reduce contrast on text below WCAG AA.
- Avoid inconsistent spacing.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #a238ff;
  color: #fff;
  padding: 12px 32px;
  border-radius: 12px;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid rgba(0,0,0,0);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

Card Example:
```css
.card {
  background: #ebe7ee;
  border-radius: 12px;
  padding: 28px;
}
```

Nav Link:
```css
.nav-link {
  color: #fdfcfe;
  text-decoration: none;
  font-weight: 400;
}
```