:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-gray-blue: #252836;
  --color-medium-gray-blue: #666f88;
  --color-white: #ffffff;
  --color-gray: #808080;
  --color-light-gray-blue: #f2f5f8;
  --color-pale-blue-gray: #d0dbe3;
  --color-brand-violet-blue: #5021ff;
  --color-off-white-blue: #e7edf1;

  /* Typography */
  --font-primary: "Be Vietnam Pro", roboto;
  --font-secondary-mono: "Space Mono", "Roboto Mono", "Courier New";
  --font-size-h1-lg: 78.7046px;
  --font-size-h1-md: 67.4611px;
  --font-size-h1-sm: 44.9741px;
  --font-size-body-lg: 22.487px;
  --font-size-body-md: 19.6762px;
  --font-size-body-sm: 16.8653px;
  --font-size-caption: 14.0544px;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.00;
  --line-height-normal: 1.20;
  --line-height-loose: 1.50;

  /* Spacing */
  --space-1: 1px;
  --space-2.81: 2.81088px;
  --space-5.62: 5.62176px;
  --space-7.02: 7.0272px;
  --space-8.43: 8.43264px;
  --space-11.24: 11.2435px;
  --space-14.05: 14.0544px;
  --space-16.86: 16.8653px;
  --space-19.67: 19.6762px;
  --space-22.48: 22.487px;
  --space-28.10: 28.1088px;
  --space-33.73: 33.7306px;
  --space-44.97: 44.9741px;
  --space-56.21: 56.2176px;
  --space-67.46: 67.4611px;
  --space-106.81: 106.813px;
  --space-134.92: 134.922px;
  --space-238.92: 238.925px;

  /* Border Radius */
  --radius-sm: 5.62176px;
  --radius-md: 16.8653px;
  --radius-lg: 22.487px;
  --radius-xl: 44.9741px;
  --radius-full: 89.9482px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 4px 4px;
  --shadow-md: rgba(0,0,0,0.1) 0px 14.0544px 42.1632px;
  --shadow-lg: rgba(0,0,0,0.15) 0px 21.0816px 70.272px;
}

# Opera Design System Specification

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

## Brand Context
Opera’s design philosophy blends clean, high-contrast layouts with bold color accents. It balances tech precision with approachable shapes. Heavy typography and generous radii make interfaces feel confident and user-friendly.

## Color Palette
- Black: #000000 — Primary text, dark backgrounds
- Dark Gray-Blue: #252836 — Secondary text, buttons
- Medium Gray-Blue: #666f88 — Borders, subtle dividers
- White: #ffffff — Backgrounds, text on dark
- Gray: #808080 — Neutral placeholder
- Light Gray-Blue: #f2f5f8 — Card and panel backgrounds
- Pale Blue-Gray: #d0dbe3 — Divider lines
- Brand Violet-Blue: #5021ff — CTAs, primary buttons, brand surfaces
- Off-White Blue: #e7edf1 — Hover/focus backgrounds

## Typography
- Primary: "Be Vietnam Pro", roboto
- Secondary monospace: "Space Mono", "Roboto Mono", "Courier New"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 large | 78.7046px | 900 | 1.00 | Hero titles |
| H1 medium | 67.4611px | 900 | — | Large section titles |
| H1 small | 44.9741px | 900 | 1.00 | Headings |
| Body large | 22.487px | 400 | — | Paragraphs |
| Body medium | 19.6762px | 400 | 1.20 | UI text |
| Small | 16.8653px | 400 | 1.50 | Captions |
| Caption | 14.0544px | 400 | 1.50 | Labels |

## Spacing & Grid
Base: custom scale. Use multiples of: 1px, 2.81px, 5.62px, 7.02px, 8.43px, 11.24px, 14.05px, 16.86px, 19.67px, 22.48px, 28.10px, 33.73px, 44.97px, 56.21px, 67.46px, 106.81px, 134.92px, 238.92px.

## Border Radius
- sm: 5.62176px — badges
- md: 16.8653px — inputs, small buttons
- lg: 22.487px — buttons, medium cards
- xl: 44.9741px — large cards, images
- full: 89.9482px — pill buttons

## Shadows & Depth
- sm: rgba(0,0,0,0.1) 0px 4px 4px
- md: rgba(0,0,0,0.1) 0px 14.0544px 42.1632px
- lg: rgba(0,0,0,0.15) 0px 21.0816px 70.272px

## Component Specifications

### Primary Button
Default:
- background: #5021ff
- color: #ffffff
- padding: 16.8653px 33.7306px
- border-radius: 22.487px
- font-size: 19.6762px
- font-weight: 700
Hover:
- box-shadow: rgba(214,214,214,0.8) 0px 0.8rem 8rem -1.2rem
- background: rgba(255,255,255,0.5)
- color: var(--text-brand)
Active:
- color: var(--text-brand)
Focus:
- background: var(--surface-primary)
- color: var(--text-brand)

### Secondary Button
Default:
- background: #2c5e4e
- color: #ffffff
- padding: 0px
- border-radius: 89.9482px
- font-size: 25.2979px
Hover:
- background: rgba(255,255,255,0.5)

### Navigation Links
Style 1:
- color: #252836
- underline
Hover:
- color: var(--text-brand)

### Input Fields
Select:
- border: 1px solid #000000
- border-radius: 16.8653px
- padding: 14.0544px 56.2176px 14.0544px 28.1088px
- background: transparent
- color: #000000

## Layout & Responsive Rules
Breakpoints:
- 320px
- 640px
- 1024px
- 1366px
- 1924px

## Interaction Rules
- Transitions: 150ms ease for hover/focus states
- Focus indicators: border-color change or background shift
- No harsh shadows; keep depth subtle

## DO List
- Use only palette colors
- Keep border radii consistent per component type
- Respect custom spacing values
- Heavy headings for emphasis
- Use monospace only for designated contexts

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't apply heavy shadows
- Don't shrink font sizes below defined scale

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #5021ff;
  color: #ffffff;
  padding: 16.8653px 33.7306px;
  border-radius: 22.487px;
  font-weight: 700;
  font-size: 19.6762px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  box-shadow: rgba(214,214,214,0.8) 0px 0.8rem 8rem -1.2rem;
  background: rgba(255,255,255,0.5);
  color: var(--text-brand);
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 44.9741px;
  padding: 22.487px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 4px;
}
```

Input:
```css
.select {
  border: 1px solid #000000;
  border-radius: 16.8653px;
  padding: 14.0544px 56.2176px 14.0544px 28.1088px;
  background: transparent;
  font-size: 16.8653px;
}
```