:root {
  /* Colors */
  --color-black: #000000;
  --color-deep-navy: #273143;
  --color-cool-grey: #6d7588;
  --color-midnight-navy: #00081c;
  --color-white: #ffffff;
  --color-warm-grey: #e7e7df;
  --color-slate-blue: #4a5871;
  --color-near-black: #222222;
  --color-muted-blue-grey: #33475b;
  --color-medium-grey: #666666;
  --color-accent-blue: #555fff;
  --color-pitaya-pink: #e51462;
  --color-green: green;
  --color-accent-orange: #F56E28;
  --color-slider-blue: #1e73be;
  --color-light-grey: #f2f2f2;
  --color-dark-grey-text: #333333;

  /* Typography */
  --font-primary: 'Poppins', Helvetica, Roboto, Arial;
  --font-size-h1-xl: 62px;
  --font-size-h1-lg: 46px;
  --font-size-h1-md: 38px;
  --font-size-h1-sm: 24px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-4: 4px;
  --space-4-5: 4.5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-8-5: 8.5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-21: 21px;
  --space-24: 24px;
  --space-27: 27px;
  --space-31: 31px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-90: 90px;
  --space-96: 96px;
  --space-120: 120px;
  --space-128: 128px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.02) 0px 10px 10px;
  --shadow-strong: rgba(0,0,0,0.3) 0px 0px 4px;
  --shadow-top-light: rgb(234,240,246) 0px -1px 3px;
}

# Liftoff Design System Specification

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

## Brand Context
Liftoff’s design is minimal, high-contrast, and built on a disciplined 8px grid. Color usage is restrained—deep navy and white dominate, with rare accent bursts. Typography is consistent (Poppins everywhere), and components favor pill-like forms with precise padding.

## Color Palette
- Black: #000000 — body text, headers, borders
- Deep Navy: #273143 — nav backgrounds, primary buttons
- Cool Grey: #6d7588 — secondary text
- Midnight Navy: #00081c — dark section backgrounds
- White: #ffffff — primary background, text on dark
- Warm Grey: #e7e7df — dividers, light section bg
- Slate Blue: #4a5871 — active button bg
- Near Black: #222222 — secondary headings
- Muted Blue-Grey: #33475b — rare accent bg/text
- Medium Grey: #666666 — placeholders
- Accent Blue: #555fff — rare highlights
- Pitaya Pink: #e51462 — special CTA buttons
- Green: green — cookie banner category header
- Accent Orange: #F56E28 — slider inactive
- Slider Blue: #1e73be — slider active, button border
- Light Grey: #f2f2f2 — borders
- Dark Grey Text: #333333 — cookie settings text

## Typography
Font family: 'Poppins', Helvetica, Roboto, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 XL | 62px | 400 | 1.16 | Hero titles |
| H1 LG | 46px | 400 | 1.13 | Page titles |
| H1 MD | 38px | 400 | 1.16 | Section headings |
| H1 SM | 24px | 400 | 1.17 | Subheadings |
| Body LG | 20px | 400 | 1.00 | Prominent labels |
| Body MD | 18px | 400 | 1.33 | Paragraphs |
| Body SM | 16px | 400 | 1.50 | Compact text |
| Caption | 14px | 400-500 | 1.43-2.29 | Labels, meta |
| Caption SM | 12px | 400-600 | 1.33-1.50 | Tiny UI text |

## Spacing & Grid
Base: 8px grid. Allowed values: 4px, 4.5px, 6px, 8px, 8.5px, 10px, 15px, 16px, 20px, 21px, 24px, 27px, 31px, 32px, 40px, 48px, 90px, 96px, 120px, 128px.

## Border Radius
- sm: 3px — small buttons
- md: 18px — images
- lg: 24px — cards
- xl: 30px — badges
- pill: 100px — large buttons
- full: 9999px — true pills

## Shadows & Depth
- Subtle: rgba(0,0,0,0.02) 0px 10px 10px
- Strong: rgba(0,0,0,0.3) 0px 0px 4px
- Top Light: rgb(234,240,246) 0px -1px 3px

## Components

### Primary Button
Default: bg #273143, color #ffffff, padding 10px 24px, radius 100px, border 1px solid #1e73be  
Hover: color #0091ae, opacity 0.75, bg initial, border none  
Active: bg #4a5871, color #ffffff, opacity 0.85  
Focus: color #ffffff, no bg change, no border

### Secondary Button
Default: bg #ffffff, color #273143, padding 10px 24px, radius 100px, border 2px solid #273143  
Hover/Active/Focus: same hover color and states as primary

### Special Pink Button
Default: bg #e51462, color #ffffff, radius 9999px  
Hover: rotateY(180deg), color #0091ae  
Active: bg #ffffff, shadow #00081c 5px 5px, opacity 0.85  
Focus: bg #273143, border 1.5px solid #00081c, box-shadow #245FCC 0px 0px 0px 2px, translateY(-110%)

### Input Field (Email)
Default: transparent bg, color #000000, padding 2px 48px 10px 0px  
Focus: box-shadow #245FCC 0px 0px 0px 2px

## Layout & Responsive Rules
Breakpoints: 320px, 350px, 400px, 425px, 480px, 600px, 640px, 768px, 800px, 900px, 960px, 992px, 1024px, 1150px, 1200px, 1280px, 1500px, 1600px, 1800px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: 2px outline in accent blue
- Hover on special buttons: transform rotateY

## DO
- Use only colors from the palette
- Maintain 8px grid (with allowed half-steps)
- Apply Poppins for all text
- Keep button radii pill-shaped
- Respect hover/focus color shifts

## DON'T
- Invent new colors
- Mix sharp and rounded corners on same element
- Use shadows excessively
- Break the type scale with arbitrary sizes

## Code Examples

```css
.btn-primary {
  background: #273143;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #1e73be;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #0091ae;
  opacity: 0.75;
  background: initial;
  border: none;
}
.btn-primary:focus {
  outline: none;
}

.card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  box-shadow: rgba(0,0,0,0.02) 0px 10px 10px;
}

.input-email {
  background: transparent;
  color: #000000;
  padding: 2px 48px 10px 0px;
}
.input-email:focus {
  box-shadow: #245FCC 0px 0px 0px 2px;
}
```