:root {
  /* Colors */
  --color-primary-text: #191919;
  --color-secondary-text: #555555;
  --color-white: #ffffff;
  --color-dark-grey: #333333;
  --color-medium-grey: #707070;
  --color-black: #000000;
  --color-focus-blue: #005fcc;
  --color-primary-blue: #0968f6;
  --color-neutral-300: #e5e5e5;
  --color-green-500: #92c821;
  /* (Add all other extracted colors here) */

  /* Typography */
  --font-family-primary: "Market Sans", Arial, Helvetica;
  --font-size-h1: 36px;
  --font-size-h2: 30px;
  --font-size-h3: 24px;
  --font-size-body-lg-bold: 20px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-weight-bold: 700;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-1: 1px;
  --spacing-4: 4px;
  --spacing-5-75: 5.75px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-72: 72px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 44px;
  --radius-full: 50%;
  --radius-extreme: 15984px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.15) 0px 2px 7px, rgba(0,0,0,0.2) 0px 5px 17px;
  --shadow-md: rgba(0,0,0,0.28) 0px 0px 3px;
  --shadow-sm: rgba(0,0,0,0.24) 0px 2px 2px, rgba(0,0,0,0.12) 0px 0px 2px;
}

# eBay Design System Specification

You are an eBay design expert. Build UIs matching their visual language exactly.

## Brand Context
eBay’s design is transactional-first: clarity over decoration, trust through colour discipline, personality in marketing bursts. Components are dense, efficient, and consistent.

## Color Palette
- Primary Text: #191919 — Headings, body text
- Secondary Text: #555555 — Subtext
- White: #ffffff — Backgrounds
- Primary Blue: #0968f6 — CTAs, focus outlines
- Focus Blue: #005fcc — Input focus borders
- Neutral 300: #e5e5e5 — Dividers
- Green 500: #92c821 — Success icons
- Kiwi 400: #4ce160 — Live state buttons
- Red 500: #f02d2d — Error
- Coral 500: #f3511b — Marketing buttons
- (Include all extracted colors similarly)

## Typography
Font family: "Market Sans", Arial, Helvetica

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 36px | 700 | 1.28 | Page titles |
| H2 | 30px | 700 | 1.33 | Section headings |
| Body LG Bold | 20px | 700 | 1.40 | Emphasised text |
| Body LG | 20px | 400 | 1.43 | Paragraphs |
| Body MD Bold | 16px | 700 | 1.50 | Labels |
| Body MD | 16px | 400 | 1.50 | Paragraphs |
| Caption | 12px | 400 | 1.50 | Meta info |

## Spacing & Grid
Base: 8px. Scale: 1px, 4px, 5.75px, 8px, 10px, 12px, 13px, 16px, 20px, 24px, 28px, 30px, 32px, 40px, 52px, 72px.

## Border Radius
- sm: 8px — Buttons
- md: 16px — Cards
- lg: 20px — Large cards
- xl: 24px — Live buttons
- pill: 44px — Inputs
- full: 50% — Avatars
- extreme: 15984px — Pills/watchlist toggle

## Shadows & Depth
- Large: rgba(0,0,0,0.15) 0px 2px 7px, rgba(0,0,0,0.2) 0px 5px 17px
- Medium: rgba(0,0,0,0.28) 0px 0px 3px
- Small: rgba(0,0,0,0.24) 0px 2px 2px, rgba(0,0,0,0.12) 0px 0px 2px

## Components

### Primary Button
Default: bg #0968f6, color #ffffff, padding 0 20px, radius 44px, border 1px solid #0968f6.  
Hover: bg transparent, opacity 0.85, border transparent.  
Active: translate(-4px).  
Focus: box-shadow 0 0 0 2px #ffffff, 0 0 0 4px #0968f6.

### Secondary Button
Default: bg white, text #191919, radius 8px, no border. Hover/focus similar to primary but with subtle color changes.

### Navigation Links
Default: color #191919, underline or none depending on context. Hover: color var(--color-foreground-secondary), no underline.

### Input Fields
Default: bg white, text black, radius 44px left, padding-left 44px. Focus: outline 2px solid #005fcc, bg var(--color-blue-1).

### Cards
bg white, radius 16–20px, subtle shadow, padding multiples of 8px.

## Layout & Responsive Rules
Max content: ~1440px desktop. Page padding: ~16px mobile, ~32px desktop. Grid gaps follow 8px multiples. Breakpoints: 320px, 768px, 1024px, 1440px, 1920px.

## Interaction Rules
Transitions ~150ms ease for hover/focus. Focus indicators are double-ring box-shadows with primary blue outer ring.

## DO
- Use only palette colors.
- Maintain 8px grid.
- Use Market Sans everywhere.
- Match border radii to component type.
- Keep shadows subtle.

## DON'T
- Invent new colors.
- Mix sharp and rounded corners.
- Overuse marketing colors in transactional UI.
- Remove focus states.

## Code Examples

```css
.btn-primary {
  background: #0968f6;
  color: #fff;
  padding: 0 20px;
  border-radius: 44px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #0968f6;
  transition: all 150ms ease;
}
.btn-primary:hover { background: transparent; opacity: 0.85; }
.btn-primary:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0968f6; }

.input-search {
  background: #fff;
  color: #000;
  border-radius: 44px 0 0 44px;
  padding-left: 44px;
}
.input-search:focus {
  outline: 2px solid #005fcc;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0968f6;
}

---

## 9. Summary

**TL;DR** — eBay’s design system is built for speed and clarity. Neutral core, blue for actions, Market Sans everywhere, 8px grid discipline. Shadows are functional, radii are generous. Keep transactional flows clean; inject personality only in marketing zones.

**Brand Keywords**  
- transaction-first  
- trust-through-colour  
- grid-disciplined  
- marketing-bursts  
- neutral-core