:root {
  /* Colors */
  --palette-bg-primary-core: #FF385C;
  --palette-bg-tertiary-core: #E00B41;
  --palette-text-secondary-error-hover: #B32505;
  --palette-bg-quaternary: #F2F2F2;
  --palette-bg-primary-luxe: #460479;
  --palette-text-primary-error: #C13515;
  --palette-bg-tertiary: #B0B0B0;
  --palette-bg-tertiary-hover: #6A6A6A;
  --palette-bg-primary-plus: #92174D;
  --palette-text-legal: #428BFF;
  --palette-text-link-disabled: #929292;
  --palette-text-focused: #3F3F3F;
  --palette-text-primary: #222222;
  --neutral-c1: #C1C1C1;
  --neutral-white: #FFFFFF;
  --neutral-dd: #DDDDDD;
  --neutral-f7: #F7F7F7;

  /* Typography */
  --font-family-primary: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue";
  --font-size-h1: 28px;
  --font-size-h2: 22px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --font-size-micro: 8px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5_5: 5.5px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-primary: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 6px, rgba(0, 0, 0, 0.1) 0px 4px 8px;
}

# Airbnb Design System Specification

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

## Brand Context
Airbnb’s design language is human-first, warm, and detail-oriented. Rounded corners, subtle shadows, and a strong primary red-pink define its look. Typography is custom and consistent across all touchpoints.

## Color Palette
- Primary Core: #FF385C — CTAs, primary buttons
- Tertiary Core: #E00B41 — Accent actions
- Secondary Error Hover: #B32505 — Error link hover
- Quaternary: #F2F2F2 — Surfaces
- Primary Luxe: #460479 — Luxe tier CTAs
- Primary Error: #C13515 — Error messages
- Tertiary: #B0B0B0 — Neutral dividers
- Tertiary Hover: #6A6A6A — Neutral hover
- Primary Plus: #92174D — Plus tier buttons
- Legal: #428BFF — Legal footer links
- Link Disabled: #929292 — Disabled links
- Focused: #3F3F3F — Focus text
- Text Primary: #222222 — Body text
- Neutral C1: #C1C1C1 — Icons, borders
- White: #FFFFFF — Background
- Neutral DD: #DDDDDD — Dividers
- Neutral F7: #F7F7F7 — Hover background

## Typography
Font: "Airbnb Cereal VF", Circular, -apple-system, system-ui, Roboto, "Helvetica Neue"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 28px | 700 | 1.43 | Page titles |
| H2 | 22px | 500 | 1.18 | Section headings |
| Body | 14px | 400 | 1.43 | Paragraphs |
| Caption | 12px | 400/700 | 1.33 | Labels |
| Micro | 8px | 700 | 1.25 | Badges |

## Spacing & Grid
Base: 8px. Values: 2, 4, 5.5, 8, 12, 16, 24, 32, 48, 80
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 2px — small links
- md: 8px — cards, tabs
- lg: 14px — div containers
- xl: 20px — buttons, groups
- full: 50% — avatars, circular buttons

## Shadows & Depth
Primary: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px

## Components

### Primary Button
Default:
```css
background: transparent;
color: #222222;
border-radius: 40px 4px 4px 40px;
border: 1px solid transparent;
font-size: 14px;
font-weight: 400;
```
Hover: background #EBEBEB, shadow var(--shadow-primary), border 1px solid #DDDDDD
Active: scale(0.9375), outline rings
Focus: outline 0, box-shadow 0 0 0 2px #3F3F3F, background #C13515

### Secondary Button
Circular:
Default: background #F2F2F2, radius 50%, no border
Same hover/active/focus as primary

### Navigation Links
Default: color #222 or #FF385C, no underline
Hover: inherit color, no underline

## Layout & Responsive Rules
Breakpoints: 99px → 2560px. Test at all common device widths.

## Interaction Rules
State changes: 150ms ease
Focus: 2px solid #3F3F3F or box-shadow token
Hover: subtle bg change, no drastic color shifts

## DO
- Use only palette colors
- Maintain 8px grid with fine adjustments
- Keep rounded corners consistent
- Use Airbnb Cereal VF for all text
- Apply shadows sparingly

## DON'T
- Invent new colors
- Use heavy drop shadows
- Mix sharp and rounded corners
- Underline links
- Overuse gradients outside tiered CTAs

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #FF385C;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #E61E4D; }
```

Card:
```css
.card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-primary);
}
```

Input:
```css
.input {
  border: 1px solid #DDDDDD;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}
.input:focus { border-color: #FF385C; outline: none; }
```