:root {
  /* Colors */
  --color-primary-magenta: #ff00d2;
  --color-secondary-navy: #0a0a32;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-blue-transparent: #469bff;
  --color-dark-gray: #555555;
  --color-primary-blue: #0278d5;
  --color-cyan: #00ffff;
  --color-medium-gray: #222222;
  --color-charcoal: #333333;
  --color-light-gray: #d8d8d8;
  --color-slate: #27455c;
  --gradient-purple: #b0f;
  --color-violet: #8100ff;
  --text-secondary: #93939f;
  --color-teal: cyan;
  --color-blue: #0075ff;
  --color-grey-dark: #b3b3b3;
  --color-grey-light: #f1f2f2;
  --color-black-var: #000000;

  /* Typography */
  --font-oswald: 'Oswald', sans-serif;
  --font-source-sans-3: 'SourceSans 3', Verdana, sans-serif;
  --font-source-sans-3-var: 'Sourcesans 3 Variablefont Wght', Arial, sans-serif;
  --font-geist-variable: 'Geist Variable', Verdana, sans-serif;

  /* Spacing (8px grid with extras) */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-26: 26px;
  --space-28: 28px;
  --space-40: 40px;
  --space-66: 66px;
  --space-108: 108px;

  /* Border Radius */
  --radius-none: 0;
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-16: 16px;
  --radius-50percent: 50%;
  --radius-pill: 99999px;

  /* Shadows */
  --shadow-overlay: rgba(0,0,0,0.2) 0px 0px 18px 0px;
  --shadow-light-gray: rgb(153,153,153) 0px 2px 10px -3px;
}

# Split Design System Specification

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

## Brand Context
Split's design system is bold, developer-facing, and high-contrast. It uses deep navy backgrounds with neon magenta and cyan accents. Typography is loud, uppercase, and scaled from extremely large hero titles down to sharp, readable body copy. Components follow an 8px grid but use pixel-level precision for borders and outlines.

## Color Palette
- Primary Magenta: #ff00d2 — Primary CTAs
- Secondary Navy: #0a0a32 — Backgrounds, containers
- White: #ffffff — Text on dark
- Black: #000000 — Footer icons, high-contrast text
- Light Blue Transparent: #469bff — Gradient overlays
- Dark Gray: #555555 — Secondary text
- Primary Blue: #0278d5 — Cookie policy links
- Cyan: #00ffff — Nav CTAs, secondary actions
- Medium Gray: #222222 — Tab labels
- Charcoal: #333333 — Footer logo text
- Light Gray: #d8d8d8 — Dividers
- Slate: #27455c — Section backgrounds
- Gradient Purple: #b0f — Gradients
- Violet: #8100ff — Gradient accent
- Text Secondary: #93939f — Body copy secondary
- Teal: cyan — Accent states
- Blue: #0075ff — Accent link
- Grey-dark: #b3b3b3 — Placeholder
- Grey-light: #f1f2f2 — Light panels

## Typography
Font families:
- Headings: 'Oswald', sans-serif
- Body: 'SourceSans 3', Verdana, sans-serif
- Variable: 'Sourcesans 3 Variablefont Wght', Arial, sans-serif
- Occasional: 'Geist Variable', Verdana, sans-serif

Type scale:
| Level | Font | Size | Weight | Line Height | Use |
| Hero | Oswald | 230px | 700 | 1.09 | Homepage hero |
| H1 | Oswald | 120px | 700 | 1.29 | Large headings |
| H2 | Oswald | 80px | 600 | 1.25 | Section headings |
| ... | ... | ... | ... | ... | ... |
Body copy: 18px, weight 400, line-height 1.50.

## Spacing & Grid
Base unit: 8px grid.  
Values: 1px, 2px, 4px, 5px, 8px, 10px, 12px, 20px, 26px, 28px, 40px, 66px, 108px.

## Border Radius
- none: 0 — tabs  
- sm: 1-3px — inputs, region elements  
- md: 16px — cards  
- full: 50% — avatars/images  
- pill: 99999px — buttons

## Shadows & Depth
Minimal shadows:
- rgba(0,0,0,0.2) 0px 0px 18px
- rgb(153,153,153) 0px 2px 10px -3px

## Component Specifications

### Primary Button (Magenta)
Default: bg #ff00d2; color #0a0a32; padding 12px 35px; radius 99999px; border 3px solid #ff00d2; font-weight 700; font-size 20px.  
Hover: bg #ffffff; color #2285f7; opacity 0.6.  
Active: bg #2c6415; color #ffffff; border 1px solid rgba(162,192,169,0.5).  
Focus: outline 1px solid #0092e4; bg #1eaedb; border 1px solid #000000.

### Secondary Button (Navy)
Default: bg #0a0a32; color #ffffff; same padding/radius; border 3px solid #0a0a32; font-weight 700.

### Navigation Link Button (Cyan)
Default: bg transparent; color #00ffff; border 3px solid transparent; radius pill.

### Input Field
Default: border 1px solid #d8d8d8; radius 2px; padding 12px 10px; font-size 13.12px.  
Focus: border-color #0092e4; outline none.

### Card
Radius 16px; border 1px solid #dddede; minimal shadow if any.

## Layout & Responsive Rules
Container width: ~1280px.  
Breakpoints: 400px, 425px, 426px, 500px, 530px, 550px, 600px, 768px, 896px.  
Page padding: multiples of 8px, increasing at desktop.

## Interaction Rules
Transitions: 150ms ease for state changes.  
Focus outlines: brand blue (#0092e4) 1px solid.  
Opacity changes for disabled states: 0.5.

## DO List
- Use ONLY colors from palette.
- Maintain 8px grid for spacing.
- Use Oswald for headings.
- Keep CTAs pill-shaped.
- Use uppercase for link buttons.

## DON'T List
- Don't invent new colors.
- Don't mix sharp and pill radii in same component.
- Don't use shadows heavily—stick to borders.
- Don't reduce hero heading sizes—they're part of the brand impact.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ff00d2;
  color: #0a0a32;
  padding: 12px 35px;
  border-radius: 99999px;
  border: 3px solid #ff00d2;
  font-weight: 700;
  font-size: 20px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
  opacity: 0.6;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #dddede;
  padding: 20px;
}
```

Input:
```css
.input {
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  padding: 12px 10px;
  font-size: 13.12px;
}
.input:focus {
  border-color: #0092e4;
  outline: none;
}
```