:root {
  /* Colors */
  --color-primary: #0070f0;
  --color-primary-hover: #0077ff;
  --color-primary-focus: #0073f7;
  --color-black: #000000;
  --color-gray-1: #87898f;
  --color-gray-2: #a5a7ad;
  --color-gray-3: #797a80;
  --color-green: #0dc268;
  --color-teal: #087c6d;
  --color-red: #ed330a;
  --color-midnight-overlay: rgba(0, 16, 61, 0.04);
  --color-deep-gray: #2c2d2e;
  --color-transparent-blue-active: rgba(0,95,249,0.14);
  --color-white: #ffffff;
  --color-lime: #97E946;
  --color-purple: #8C64FF;
  --color-orange: #FF9E00;
  --color-orange-hover: #F59802;
  --color-yellow: #FFEFE6;
  --color-yellow-accent: rgba(255, 199, 0, 1);
  --color-purple-sweet: #F2E8FF;
  --color-tooltip-blue-tint: #DDE9FF;
  --color-tooltip-text-blue: #1C4479;
  --color-bg-secondary: #F0F1F3;
  --color-bg-secondary-hover: #E6E8EC;
  --color-bg-positive-tint: #ECFAF3;
  --color-bg-negative-tint: #FEEFEB;
  --color-bg-sky: #CCE4FF;
  --color-bg-dark: #19191A;

  /* Typography */
  --font-primary: 'VKSansDisplay', 'MailSans', 'Helvetica', 'Arial';
  --font-secondary: 'Helvetica', 'Arial';

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --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-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-70_5: 70.5px;

  /* Radius */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0, 16, 61, 0.06) 0px 6px 20px 0px;
  --shadow-md: rgba(18, 25, 43, 0.12) 0px 4px 12px 0px;
  --shadow-deep: rgba(0, 16, 61, 0.12) 0px 10px 24px 0px;
  --shadow-xdeep: rgba(0, 16, 61, 0.28) 0px 16px 48px 0px;
}

# Imgsmail Design System Specification

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

## Brand Context
Imgsmail's design system is functional, dense, and optimized for daily high-frequency use. Bright saturated blues drive interaction, supported by clean sans-serif typography and subtle shadows. White backgrounds and controlled neutrals keep the interface calm.

## Color Palette
- Primary Blue: #0070f0 — Links, CTAs, primary buttons
- Action Blue Hover: #0077ff — Login button hover
- Action Blue Focus: #0073f7 — Focus outlines
- Black: #000000 — Strong text/icons
- Gray 1: #87898f — Secondary text
- Gray 2: #a5a7ad — Neutral UI elements
- Gray 3: #797a80 — Medium emphasis neutrals
- Green: #0dc268 — Success states
- Teal: #087c6d — Accent
- Red: #ed330a — Errors
- Midnight Overlay: rgba(0, 16, 61, 0.04) — Hover/focus overlay
- Deep Gray: #2c2d2e — Primary text
- Transparent Blue Active: rgba(0,95,249,0.14) — Hover/focus overlay
- White: #ffffff — Backgrounds
- Lime: #97E946 — Accent
- Purple: #8C64FF — Accent purple
- Orange: #FF9E00 — Alternative accent
- Orange Hover: #F59802 — Alternative hover
- Yellow: #FFEFE6 — Accent background
- Yellow Accent: rgba(255, 199, 0, 1) — Accent
- Purple Sweet: #F2E8FF — Soft background
- Tooltip Blue Tint: #DDE9FF — Tooltip bg
- Tooltip Text Blue: #1C4479 — Tooltip text
- Background Secondary: #F0F1F3 — Secondary surfaces
- Background Secondary Hover: #E6E8EC — Hovered cards
- Background Positive Tint: #ECFAF3 — Positive bg
- Background Negative Tint: #FEEFEB — Negative bg
- Background Sky: #CCE4FF — Sky bg
- Background Dark: #19191A — Dark mode surfaces

## Typography
Fonts:
- Primary: 'VKSansDisplay', 'MailSans', 'Helvetica', 'Arial'
- Secondary: 'Helvetica', 'Arial'

Type Sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 28px | 500 | 1.29 | Page titles |
| H1 | 24px | 700 | 1.17 | Section headings |
| H1 | 20px | 500 | 1.30 | Smaller headings |
| Button | 17px | 500 | - | Primary actions |
| Link | 17px | 500 | 1.29 | Navigation |
| Body | 16px | 400 | 1.38 | Text |
| Link | 15px | 400 | 1.33 | Secondary links |
| Button | 15px | 500 | 1.33 | Secondary actions |
| Caption | 14px | 400 | 1.29 | Metadata |
| Caption | 13px | 400 | 1.38 | Meta text |
| Caption Small | 11px | 400 | 1.27 | Tiny labels |

## Spacing & Grid
Base: 8px grid
Scale: 2px, 3px, 4px, 6px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 20px, 24px, 32px, 70.5px
Use for: button padding, card spacing, section gaps

## Border Radius
- sm: 6px — small divs
- md: 8px — buttons, cards
- lg: 12px — modals, large cards
- xl: 20px — larger modules
- full: 50% — avatars

## Shadows & Depth
- Main: rgba(0, 16, 61, 0.06) 0px 6px 20px
- Medium: rgba(18, 25, 43, 0.12) 0px 4px 12px
- Deep: rgba(0, 16, 61, 0.12) 0px 10px 24px
- Extra Deep: rgba(0, 16, 61, 0.28) 0px 16px 48px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #0077ff;
  color: #ffffff;
  padding: 0px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  font-size: 15px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: initial; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #0070f0;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #0077ff;
  font-weight: 500;
  font-size: 15px;
}
.btn-secondary:hover {
  color: #005bd1;
  background-color: rgba(39, 43, 55, 0.3);
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: rgba(0, 16, 61, 0.06) 0px 6px 20px;
}
```

## Layout & Responsive Rules
Max content width: 1100px
Page padding: 16px (mobile) / 32px (desktop)
Grid gap: multiples of 8px

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus indicators: use brand blue outlines
- Loading states: dim opacity

## DO List
- Use only colors from palette
- Maintain 8px grid
- Use VKSansDisplay for headings
- Keep button radii at 8px
- Reserve status colors for functional states

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't drop underlines without color contrast
- Don't overuse shadows — keep subtle

## Code Examples
```css
/* Primary Button */
.btn-primary { background: #0077ff; color: #ffffff; padding: 0 20px; border-radius: 8px; }

/* Secondary Button */
.btn-secondary { background: transparent; color: #0070f0; border: 1px solid #0077ff; }

/* Card */
.card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: rgba(0,16,61,0.06) 0px 6px 20px; }
```