:root {
  /* Colors */
  --color-primary: #ff8200;
  --color-primary-hover: #ff5900;
  --color-grey-1: #808080;
  --color-grey-2: #cccccc;
  --color-grey-3: #939393;
  --color-grey-4: #606060;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-orange-secondary: #eb7340;
  --color-offwhite: #f0f1f4;
  --color-place-blue: #4f7db2;
  --color-gold-icon: #fec42d;
  --color-warn-bg: #daeeff;
  --color-orange-3: #eb7350;
  --color-red-special: #fe3c56;
  --color-orange-special: #ff9406;
  --color-blue-special: #52afff;
  --color-deep-red: #a40000;
  --color-gray-10: #dfe1e8;
  --color-liked: #e14123;
  --color-error-bg: rgba(255,237,219,0.95);
  --color-red-badge: #ff2026;
  --color-red-2: red;
  --color-config-bg: #e5e6eb;
  --color-nav-bg: transparent;

  /* Typography */
  --font-quote-fallback: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans;
  --font-arial: Arial, Helvetica, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-38: 38px;
  --space-40: 40px;
  --space-224: 224px;

  /* Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-25: 25px;
  --radius-36: 36px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
  --shadow-orange: rgba(255, 130, 0, 0.4) 0px 2px 10px 0px;
  --shadow-white: rgb(255, 255, 255) 0px 0px 3px 0px;
  --shadow-hard: rgba(0, 0, 0, 0.8) 0px 0px 7px 0px;
}

# Weibo Design System Specification

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

## Brand Context
Weibo’s design is built for high-density social interaction. Orange drives engagement, neutrals hold content without distraction. Typography is system-based for speed, spacing is tight, corners are small and consistent.

## Color Palette
- Primary Orange: #ff8200 — CTAs, primary buttons, login actions
- Primary Hover Orange: #ff5900 — Hover state for primary buttons
- Neutral Grey-1: #808080 — Secondary text, metadata
- Light Grey: #cccccc — Background neutral, dividers
- Mid Grey: #939393 — Tertiary text, logo text
- White: #ffffff — Surfaces, text on orange
- Black: #000000 — Headlines, icons
- Accent Orange-Red: #eb7340 — Icon links, secondary accents
- Dark Grey: #606060 — UI controls, icons
- Off-White: #f0f1f4 — Container backgrounds
- Place Blue: #4f7db2 — Location tags
- Gold Icon: #fec42d — Special icon backgrounds
- Warn Background: #daeeff — Alerts
- Orange-3: #eb7350 — Secondary orange accents
- Red Special: #fe3c56 — Alert icons
- Orange Special: #ff9406 — Highlight icons
- Blue Special: #52afff — Highlight icons
- Deep Red: #a40000 — Highlight icons
- Gray-10: #dfe1e8 — Borders, neutral UI
- Liked Color: #e14123 — Like icons
- Error BG: rgba(255,237,219,0.95) — Error states
- Red Badge: #ff2026 — Notifications
- Red-2: red — Error text
- Config BG: #e5e6eb — Panel background
- Nav BG Transparent: transparent — Top navigation

## Typography
Fonts:
- QuoteFallback: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans
- Arial, Helvetica

Sizes/Weights:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1-lg | QuoteFallback | 22px | 500 | 1.18 | Page titles |
| H1-md | Arial | 20px | 500 | 1.00 | Headlines |
| Body | QuoteFallback | 16px | 400 | — | Feed text |
| Body-bold | QuoteFallback | 15px | 700 | 1.40 | Emphasis text |
| Caption | Arial | 14px | 400 | — | Metadata |
| Small | QuoteFallback | 12px | 400 | 1.17 | Small UI labels |
| Tiny | QuoteFallback | 10px | 400 | 1.80 | Secondary info |

## Spacing & Grid
Base unit: 8px
Scale: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 18, 20, 38, 40, 224
Use multiples for all padding/margins.

## Border Radius
- none: 0px — square edges
- sm: 2px — subtle rounding
- md: 4px — inputs, cards
- lg: 8px — badges, larger cards
- pill: 15px — buttons
- xl-pill: 36px — pill buttons
- full: 50% — avatars, circular icons

## Shadows & Depth
- Soft: rgba(0,0,0,0.1) 0px 2px 4px
- Accent: rgba(255,130,0,0.4) 0px 2px 10px
- Rarely used — prefer borders for depth.

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background-color: #ff8200;
  color: #ffffff;
  padding: 9px 15px;
  border-radius: 0px;
  border: none;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}
.btn-primary:hover {
  background-color: #ff5900;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.btn-secondary {
  background-color: #f9f9f9;
  color: #838383;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
}
```

### Navigation Links
```css
.nav-link {
  color: #000000;
  text-decoration: none;
}
```

### Input Fields
```css
.input-text {
  background-color: transparent;
  color: #333333;
  border: none;
  border-radius: 0px;
  padding: 0px;
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #f2f2f2;
  padding: 15px;
}
```

## Layout & Responsive Rules
- Use Vuetify grid
- All spacing multiples of 8px
- No breakpoints defined — follow Vuetify defaults

## Interaction Rules
- State changes: 150ms ease transitions
- Hover: color or background change only
- Focus: outline in high contrast color

## DO List
- Use only defined palette colors
- Keep spacing to multiples of 8px
- Maintain consistent border radius per component type
- Use system fonts — no custom web fonts
- Keep shadows minimal

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't overuse shadows
- Don't break the tight vertical rhythm

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ff8200;
  color: #fff;
  padding: 9px 15px;
  border-radius: 0;
  font: 500 20px Arial;
}
```

Card:
```css
.card {
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 8px;
  padding: 15px;
}
```

Input:
```css
.input {
  background: transparent;
  color: #333;
  border: none;
  padding: 0;
}
```