:root {
  /* Colors */
  --color-neutral-dark: #333333;
  --color-neutral-gray-primary: #6c6c6c;
  --color-white: #ffffff;
  --color-leaf-green-cta: #d7eb80;
  --color-deep-neutral: #252525;
  --color-light-neutral-gray: #bebeb9;
  --color-leaf-green-hover: #bbcf65;
  --color-light-border-gray: #deded9;
  --color-accent-blue: #0193c5;
  --color-negative: #8E0624;
  --color-negative-active: #E71140;
  --color-negative-hover: #B90A32;
  --color-green-leaf-bottom: #006600;
  --color-green-leaf-top: #008009;
  --color-fossil-top: #8F4759;
  --color-fossil-bottom: #632f3C;
  --color-background-secondary: #275243;
  --color-text-overline-secondary: #F7BC00;
  --color-featured-hover: #BBCF65;
  --color-featured-active: #A1B353;
  --color-overlay-primary: rgba(76, 76, 76, .5);
  --color-background-quaternary: #f0f0eb;
  --color-focused: #0094C7;
  --color-tripadvisor-rating: #00aa6c;
  --color-video-background: #000000;

  /* Typography */
  --font-founders-grotesk: "Founders Grotesk", Inter, helvetica, arial;
  --font-inter: Inter, helvetica, arial;
  --font-size-h1-lg: 54px;
  --font-size-h1-md: 48px;
  --font-size-h1-sm: 36px;
  --font-size-body-lg: 24px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption: 14px;
  --font-size-small-caption: 12px;
  --font-size-micro: 10px;

  /* Spacing */
  --space-base: 8px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;
  --space-100: 100px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: rgba(26, 26, 26, 0.18) 0px 1px 2px 0px, rgba(26, 26, 26, 0.06) 0px 0px 8px 0px;
  --shadow-md: rgba(26, 26, 26, 0.18) 0px 2px 4px 0px, rgba(26, 26, 26, 0.06) 0px 0px 12px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.2) 0px 11px 33px 0px;
}

# Ecosia Design System Specification

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

## Brand Context
Ecosia is a sustainability-focused search engine with a clean, neutral UI accented by earthy greens and warm yellows. Typography is all sans-serif, pairing a branding-friendly headline face with a utilitarian UI font. Controls are friendly pill shapes, shadows are subtle, and color pops are carefully rationed.

## Color Palette
- Neutral Dark: #333333 — Base text, buttons, headers
- Neutral Gray Primary: #6c6c6c — Muted links, subdued text
- White: #ffffff — Surfaces, button backgrounds
- Leaf Green CTA: #d7eb80 — CTA default background
- Leaf Green Hover: #bbcf65 — CTA hover background
- Deep Neutral: #252525 — Borders, text
- Light Neutral Gray: #bebeb9 — Input borders
- Light Border Gray: #deded9 — Dividers
- Accent Blue: #0193c5 — Hover/focus states
- Focused Blue: #0094C7 — Component focus outlines
- Background Secondary: #275243 — Brand secondary surfaces
- Negative: #8E0624 — Danger states
- Negative Active: #E71140 — Danger active state
- Negative Hover: #B90A32 — Danger hover
- Green Leaf Icon Bottom: #006600 — Decorative icon
- Green Leaf Icon Top: #008009 — Decorative icon
- Fossil Fuel Icon Top: #8F4759 — Decorative icon
- Fossil Fuel Icon Bottom: #632f3C — Decorative icon
- Text Overline Secondary: #F7BC00 — Highlights
- Featured Hover: #BBCF65 — Featured button hover
- Featured Active: #A1B353 — Featured button active
- Overlay Primary: rgba(76, 76, 76, .5) — Overlay layers
- Background Quaternary: #f0f0eb — Secondary page bg
- Tripadvisor Rating: #00aa6c — Ratings
- Video Background: #000000 — Media bg

## Typography
Fonts:
- Headings: "Founders Grotesk", Inter, helvetica, arial
- Body/UI: Inter, helvetica, arial

Sizes/Line Heights:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1-lg | Founders Grotesk | 54px | 400 | 1.10 | Hero headline |
| H1-lg-bold | Founders Grotesk | 54px | 700 | 1.30 | Emphatic headline |
| H1-md | Founders Grotesk | 48px | 700 | 1.10 | Section hero |
| H1-sm | Founders Grotesk | 36px | 700 | 1.30 | Subheading |
| Title | Inter | 24px | 700 | 1.40 | Section title |
| Body-lg | Inter | 18px | 400 | 1.15 | Button text/UI |
| Body-md | Inter | 16px | 400 | 1.40 | Paragraph text |
| Caption | Inter | 14px | 400 | 1.40 | Caption text |
| Small-caption | Inter | 12px | 400 | 1.40 | Small caption |
| Micro | Inter | 10px | 700 | 1.15 | Badges |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 20px, 32px, 40px, 80px, 100px

## Border Radius
- sm: 4px — Links
- md: 10px — Dialogs, buttons, images
- lg: 20px — Sections
- xl: 40px — Inputs
- full: 9999px — Pills, chips
- circle: 50% — Avatars

## Shadows & Depth
- shadow-sm: rgba(26, 26, 26, 0.18) 0px 1px 2px 0px, rgba(26, 26, 26, 0.06) 0px 0px 8px 0px
- shadow-md: rgba(26, 26, 26, 0.18) 0px 2px 4px 0px, rgba(26, 26, 26, 0.06) 0px 0px 12px 0px
- shadow-lg: rgba(0, 0, 0, 0.2) 0px 11px 33px 0px

## Component Specifications

### Primary Button (Leaf Green CTA)
Default:
```css
background-color: #d7eb80;
color: #333333;
padding: 0px 15px;
border-radius: 9999px;
border: 1px solid #d7eb80;
font-size: 16px;
font-weight: 400;
```
Hover: `background-color: #bbcf65;`  
Active: transparent bg, #333 text  
Focus: outline 2px solid #0094C7

### Secondary Button (Neutral Outline)
Default:
```css
background-color: transparent;
color: #333333;
border: 1px solid #252525;
border-radius: 9999px;
padding: 0px 15px;
font-size: 16px;
```
Hover/Active: use `--color-button-background-secondary-hover` etc.

### Input Field (Search)
```css
background-color: transparent;
color: #333333;
border: none;
padding: 0;
border-radius: 0;
```
Focus: `border-color: var(--color-form-border-primary-active); outline: none;`

### Link Styles
- Dark link: #333 underline default/hover
- White link: #fff no underline default, underline hover
- Gray link: #6c6c6c underline default/hover

## Layout & Responsive Rules
Max widths adjust at:
399px, 400px, 549px, 550px, 700px, 767px, 768px, 1079px, 1080px, 1280px, 1290px, 1440px, 1920px

## Interaction Rules
- Transition: 150ms ease for hover/focus/active changes
- Focus indicators: 2px solid #0094C7
- Disabled: opacity 0.5

## DO List
- Use exact hex from palette—no off-brand tweaks
- Keep all spacing in 8px multiples
- Reserve greens for CTAs, icons, highlights
- Use Founders Grotesk only for headings
- Use pill radius for all buttons

## DON'T List
- Don’t use pale green for text
- Don’t mix fossil icon colors into UI controls
- Don’t add drop shadows heavier than shadow-lg
- Don’t override neutral gray text colors

## Code Examples

Primary Button:
```css
.btn-primary {
  background-color: #d7eb80;
  color: #333333;
  padding: 0px 15px;
  border-radius: 9999px;
  border: 1px solid #d7eb80;
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover { background-color: #bbcf65; }
.btn-primary:focus { outline: 2px solid #0094C7; }
.btn-primary:disabled { opacity: 0.5; }
```

Card:
```css
.card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
```

Input:
```css
.input-search {
  background-color: transparent;
  color: #333333;
  border: none;
  padding: 0;
}
.input-search:focus { border-color: var(--color-form-border-primary-active); outline: none; }
```