:root {
  /* Colors */
  --color-black: #000000;
  --color-green-primary: #28d223;
  --color-white: #ffffff;
  --color-grey-dark: #333333;
  --color-grey-mid: #555555;
  --color-grey-light: #f4f4f4;
  --color-grey-pale: #d7d7d7;
  --color-green-hover1: #05be00;
  --color-green-hover2: #19c914;
  --color-hover-blue: #1883fd;
  --color-teal-border: #32ae88;
  --color-grey-border-light: #d1d1d1;
  --color-grey-border-mid: #bbbbbb;
  --color-divider-grey: #d8d8d8;

  /* Typography */
  --font-family-primary: 'Hauss', Tahoma;
  --font-size-h1-lg: 80px;
  --font-size-h1-md: 48px;
  --font-size-h1-sm: 22px;
  --font-size-link-lg: 22px;
  --font-size-link-md: 18px;
  --font-size-link-sm: 17px;
  --font-size-button-lg: 14.4px;
  --font-size-button-sm: 13.12px;
  --font-size-caption-lg: 14px;
  --font-size-caption-md: 13.6px;
  --font-size-caption-sm: 13.008px;
  --font-size-caption-xs: 12.8px;
  --font-size-caption-xxs: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9_6: 9.6px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-23: 23px;
  --space-24: 24px;
  --space-38_39: 38.39px;
  --space-40: 40px;
  --space-48: 48px;
  --space-75: 75px;
  --space-128: 128px;
  --space-160: 160px;

  /* Radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-xs2: 2.5px;
  --radius-sm: 3px;
  --radius-md: 17px;
  --radius-md2: 20px;
  --radius-lg: 24px;
  --radius-xl: 46px;
  --radius-xl2: 50px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.2) 0px 0px 18px 0px;
  --shadow-layered: rgba(0,0,0,0) 0px 2px 4px 0px, rgba(50,50,93,0.1) 0px 7px 14px 0px;
  --shadow-inset: rgb(199,197,199) -3px -3px 5px -2px;
  --shadow-ambient: rgb(199,197,199) 0px 0px 12px 2px;
}

# Playrix Design System Specification

System Prompt:
You are a Playrix design expert. Build UIs matching their visual language exactly.

Brand Context:
Playrix's design system is bright, bold, and disciplined. It uses a saturated green for primary actions, clean black and white neutrals, and a custom Hauss typeface. Corners are consistently rounded, spacing follows an 8px base grid with micro adjustments.

Color Palette:
- Black: #000000 — Base text, outlines
- Playrix Green: #28d223 — CTAs, links, borders
- White: #ffffff — Backgrounds, text on green
- Dark Grey: #333333 — Secondary text
- Mid Grey: #555555 — Tertiary text/icons
- Light Grey: #f4f4f4 — Footers, surfaces
- Pale Grey: #d7d7d7 — Low-importance dividers
- Bright Green Hover 1: #05be00 — Hover/focus alt green
- Bright Green Hover 2: #19c914 — Hover/focus alt green
- Hover Blue: #1883fd — Hover link states
- Light Teal Border: #32ae88 — Rare borders
- Light Grey Border: #d1d1d1 — Input borders
- Mid Grey Border: #bbbbbb — Disabled button borders
- Divider Grey: #d8d8d8 — Dividers

Typography:
Font Family: 'Hauss', Tahoma
Type Scale:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1-lg | 80px | 700 | 1.40 | Hero titles |
| H1-md | 48px | 700 | 1.20 | Section titles |
| H1-sm | 22px | 400 | 1.40 | Subheadings |
| H1-sm-bold | 22px | 700 | 1.50 | Subheadings bold |
| Link-lg | 22px | 700 | 1.50 | Major links |
| Link-md | 18px | 400 | 1.40 | Body links |
| Link-sm | 17px | 500 | 1.40 | Inline links |
| Button-lg | 14.4px | 400 | 2.64 | Large buttons |
| Button-sm | 13.12px | 600 | 1.40 | Small buttons |
| Caption-lg | 14px | 700 | 1.40 | Bold captions |
| Caption-md | 13.6px | 400 | — | Body captions |
| Caption-sm | 13.008px | 400 | 1.50 | Small captions |
| Caption-xs | 12.8px | 400 | 1.10 | Extra small captions |

Spacing & Grid:
Base: 8px grid with deviations (4px, 5px, 6px, etc.)
Scale: 1px, 4px, 5px, 6px, 8px, 9.6px, 10px, 12px, 13px, 15px, 16px, 20px, 23px, 24px, 38.39px, 40px, 48px, 75px, 128px, 160px.

Border Radius:
- none: 0px — sharp corners
- xs: 2px — buttons, inputs
- xs2: 2.5px — region containers
- sm: 3px — small divs
- md: 17px — filter UI
- md2: 20px — lists
- lg: 24px — divs, images, videos
- xl: 46px — spans
- xl2: 50px — images, search inputs

Shadows & Depth:
- Soft: rgba(0,0,0,0.2) 0px 0px 18px
- Layered: rgba(0,0,0,0) + rgba(50,50,93,0.1) — subtle depth
- Inset: rgb(199,197,199) -3px -3px 5px — rare
- Ambient: rgb(199,197,199) 0px 0px 12px — rare

Component Specifications:

Primary Button:
Default:
background: #28d223;
color: #ffffff;
padding: 12px 10px;
border-radius: 2px;
border: 1px solid #28d223;
font-weight: 600;
font-size: 13.12px;
Hover:
background: rgb(30, 174, 219);
color: #ffffff;
opacity: 0.7;
Active:
transform: translateY(1px);
Focus:
outline: 2px solid #000000;
border: 1px solid #000000;
background: rgb(30, 174, 219);
opacity: 0.7;

Secondary Button:
background: #ffffff;
color: #000000;
border-radius: 2.5px;
outline: 1px solid #000000;
box-shadow: rgba(0,0,0,0.2) 0px 0px 18px;
font-size: 16px;
font-weight: 400;

Navigation Links:
Variant 1:
default: #28d223;
hover: #1883fd;
no underline.
Variant 2:
default: #000000;
hover: #1883fd;
no underline.

Input Fields:
border: 1px solid #d1d1d1;
border-radius: 2px;
background: #ffffff;
font-size: 16px;
focus: no outline change.

Layout & Responsive Rules:
Breakpoints: 320px up to 2000px — multiple steps.
Mobile padding: 16px; Desktop padding: 24px; Grid gap: 20px.

Interaction Rules:
Transitions: 150ms ease for state changes.
Focus indicators: solid outlines in black or brand green.
Loading states: reduce opacity to 0.5.

DO List:
- Use ONLY colors from the palette.
- Maintain 8px grid — spacing multiples.
- Use Hauss for all text.
- Keep button corners at 2px radius.
- Keep link states consistent — no underline.
- Use white text on green buttons.

DON'T List:
- Don't invent new greens or blues.
- Don't mix sharp and rounded corners in same component.
- Don't use hover blue for static elements.
- Don't drop shadows on large surfaces unless specified.

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #28d223;
  color: #ffffff;
  padding: 12px 10px;
  border-radius: 2px;
  border: 1px solid #28d223;
  font-weight: 600;
  font-size: 13.12px;
  transition: background 150ms ease, opacity 150ms ease;
}
.btn-primary:hover {
  background: rgb(30, 174, 219);
  opacity: 0.7;
}
.btn-primary:focus {
  outline: 2px solid #000000;
  border: 1px solid #000000;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #000000;
  border-radius: 2.5px;
  outline: 1px solid #000000;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 18px;
  font-size: 16px;
  font-weight: 400;
}
```

Input Field:
```css
.input {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  padding: 8px 10px;
  font-size: 16px;
  background: #ffffff;
}
.input:focus {
  outline: none;
}
```