:root {
  /* Colors */
  --color-primary: #00a3d9;
  --color-secondary: #7a9199;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-gray-blue: #dae3e6;
  --color-hover-blue: #0086b3;
  --color-hover-gray: #829399;
  --color-hover-bright-blue: #00ace6;
  --mail-color: #007399;
  --icon-post-color: #FF9500;
  --viber-color: #7B519D;
  --sb-color: #26AFF5;
  --vk-color: #3B5F8E;
  --icon-friending-color: #39BF71;
  --icon-entry-color: #00C8CE;
  --reaction-heart-color: #FF3127;
  --tg-color: #2AABEE;
  --footer-main-bg: #194257;
  --footer-top-bg: #00303f;
  --lj-color: #248FCE;
  --icon-pingback-color: #34AD66;
  --bell-color: #333333;
  --embed-color: #2C90CC;
  --item-active-color: #F0F7FA;
  --tb-color: #29344A;
  --accent-hover-color: #00C0FF;
  --stumbleupon-color: #EB4924;
  --active-label-color: #FF4C44;
  --icon-message-color: #319DEA;
  --tw-color: #60B7E6;
  --icon-answer-color: #9B31EA;
  --po-color: #EE4256;
  --icon-birthday-color: #CC5AFA;
  --userpic-holder-color: #D8D8D8;
  --moimir-color: #168DE2;
  --footer-color-main: #ffffff;
  --border-color: #E5EBEE;
  --icon-feed-color: #F3469D;
  --ok-color: #ED6C23;
  --go-color: #EA4335;
  --fb-color: #2A438B;
  --wa-color: #67C15E;
  --icon-repost-color: #1EB84B;
  --accent-active-color: #0996C5;
  --openid-color: #F69320;
  --date-color: #8C969B;

  /* Typography */
  --font-primary: "ProximaNova", Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-24: 24px;
  --space-40: 40px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 20px;
  --radius-pill: 36px;

  /* Shadows */
  --shadow-elevation: rgba(0,0,0,0.12) 0px 0px 1px 0px, rgba(0,0,0,0.12) 0px 8px 12px 0px;
}

# LiveJournal Design System Specification

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

## Brand Context
LiveJournal is a long-lived social blogging platform. The design values clarity, legibility, and functional interaction over flashy visuals. Colors are purposeful, typography is tuned for reading, and spacing follows an 8px grid.

## Color Palette
- Primary Blue: #00a3d9 — Links, CTAs, primary buttons
- Secondary Gray-blue: #7a9199 — Secondary text, less prominent links
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — High-contrast text
- Light Gray-blue: #dae3e6 — Dividers, input borders
- Hover Blue: #0086b3 — Hover state for links/buttons
- Hover Gray: #829399 — Hover for gray text
- Hover Bright Blue: #00ace6 — Alternate hover
- Mail Blue: #007399 — Mail icon
- Orange: #FF9500 — Post icon
- Purple: #7B519D — Viber icon
- Sky Blue: #26AFF5 — Social buttons
- VK Blue: #3B5F8E — VK icon
- Green: #39BF71 — Friending icon
- Cyan: #00C8CE — Entry icon
- Red: #FF3127 — Reaction heart
- Telegram Blue: #2AABEE — Telegram icon
- Footer Dark Blue: #194257 — Footer background
- Footer Navy: #00303f — Footer top background
- LJ Blue: #248FCE — LJ logo alt
- Pingback Green: #34AD66 — Pingback icon
- Bell Gray: #333333 — Bell icon
- Embed Blue: #2C90CC — Embed icon
- Item Active Bg: #F0F7FA — Active state background
- Toolbar Navy: #29344A — Toolbar background
- Accent Hover: #00C0FF — Accent hover
- StumbleUpon Red: #EB4924 — StumbleUpon icon
- Active Label Red: #FF4C44 — Active label
- Message Blue: #319DEA — Message icon
- Twitter Blue: #60B7E6 — Twitter icon
- Answer Purple: #9B31EA — Answer icon
- Pink-red: #EE4256 — PO icon
- Birthday Purple: #CC5AFA — Birthday icon
- Gray: #D8D8D8 — Userpic holder
- MoiMir Blue: #168DE2 — MoiMir icon
- Footer Text White: #ffffff — Footer text
- Border Gray: #E5EBEE — Borders
- Feed Pink: #F3469D — Feed icon
- OK Orange: #ED6C23 — OK.ru icon
- Google Red: #EA4335 — Google icon
- Facebook Blue: #2A438B — Facebook icon
- WhatsApp Green: #67C15E — WhatsApp icon
- Repost Green: #1EB84B — Repost icon
- Accent Active Blue: #0996C5 — Accent active state
- OpenID Orange: #F69320 — OpenID icon
- Date Gray: #8C969B — Date text

## Typography
Font: "ProximaNova", Helvetica, Arial
Sizes:
| Level | Size | Weight | Line Height | Use |
| H1 | 32px | 700 | 1.00 | Page titles |
| H2 | 30px | 700 | 1.00 | Section titles |
| H3 | 28px | 700 | 1.40 | Subtitles |
| Body | 16px | 400 | 1.40 | Paragraphs |
| Button | 13px | 600 | 4.62 | CTAs uppercase |
| Caption | 12px | 400 | 1.40 | Meta info |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 4px, 5px, 6px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 17px, 24px, 40px

## Border Radius
- none: 0 — tables, hard edges
- sm: 3px — buttons
- md: 6px — inputs
- lg: 20px — large buttons
- pill: 36px — pill buttons

## Shadows & Depth
- Elevation: rgba(0,0,0,0.12) 0px 0px 1px, rgba(0,0,0,0.12) 0px 8px 12px

## Component Specifications

### Primary Button
Default:
```css
background: #0099cc;
color: #ffffff;
padding: 10px 15px;
border-radius: 3px;
font-weight: 600;
font-size: 13px;
border: none;
```
Hover:
```css
background: #eeeeee;
border: 1px solid #d4dce0;
color: #0086b3;
```
Focus:
```css
color: #0086b3;
```
Active:
```css
color: #0086b3;
border: none;
```

### Link
Default: color #00a3d9, no underline. Hover: color #0086b3.

### Input
```css
border: 1px solid #dae3e6;
border-radius: 6px;
padding: 8px;
font-size: 14px;
```

## Layout & Responsive Rules
Breakpoints: 300px, 400px, 460px, 500px, 650px, 700px, 800px, 832px, 1000px
Mobile-first, adjust padding/gaps per breakpoint.

## Interaction Rules
- Transition: 150ms ease
- Hover states: darker shade
- Focus: color shift

## DO
- Use only palette colors
- Keep 8px grid spacing
- Maintain consistent radii
- Use ProximaNova everywhere

## DON'T
- Add unlisted colors
- Mix sharp and rounded corners
- Use heavy shadows

## Code Examples
Primary Button:
```css
.btn-primary {
  background: #0099cc;
  color: #fff;
  padding: 10px 15px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 13px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #eeeeee;
  border: 1px solid #d4dce0;
  color: #0086b3;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.12) 0px 0px 1px, rgba(0,0,0,0.12) 0px 8px 12px;
}
```

Input:
```css
.input {
  border: 1px solid #dae3e6;
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
}
.input:focus {
  border-color: #00a3d9;
  outline: none;
}
```