:root {
  /* Colors */
  --color-neutral-dark: #2f3134;
  --color-neutral-medium: #6e727a;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey: #808080;
  --color-orange: #ff6700;
  --color-grey-light: #ebedef;
  --color-red: #c4170c;
  --color-green: #06aa48;
  --color-blue-interactive: #005fcc;
  --color-swiper-theme: #007aff;

  /* Typography */
  --font-primary: "Globotipo UI", Inter, -apple-system, system-ui, Avenir Next, Avenir, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial;
  --font-alt: "Times";
  --font-secondary: "opensans", helvetica, arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-7-5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-14-5: 14.5px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-31-5: 31.5px;
  --space-32: 32px;
  --space-36: 36px;
  --space-52: 52px;
  --space-60: 60px;

  /* Radius */
  --radius-0: 0px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-inset-light: rgba(206, 209, 215, 0.4) 0px 2px 2px 0px inset;
  --shadow-drop-soft: rgba(0, 0, 0, 0.2) 0px 0px 10px 3px;
  --shadow-surface-light: rgb(235, 237, 239) 0px 0px 20px 0px;
}

# Globo Design System Specification

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

## Brand Context
Globo’s design language is information-first and category-driven. Dense content layouts are controlled with a disciplined color system, tight typography, and consistent spacing. Colors encode meaning — red for breaking news, green for sports, orange for entertainment — while deep neutrals anchor the UI.

## Color Palette
- Deep Neutral: #2f3134 — base text, header background
- Medium Neutral: #6e727a — secondary text
- White: #ffffff — backgrounds, text on dark
- Black: #000000 — pure text, icons
- Grey: #808080 — disabled states, dividers
- Orange: #ff6700 — entertainment category
- Light Grey: #ebedef — background surfaces, borders
- Red: #c4170c — breaking news category
- Green: #06aa48 — sports category
- Blue Interactive: #005fcc — hover, focus states
- Swiper Theme Blue: #007aff — carousel controls

## Typography
Font families:
- Primary: "Globotipo UI", Inter, -apple-system, system-ui, Avenir Next, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial
- Secondary: "opensans", helvetica, arial
- Serif: "Times"

Type sizes:

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | Globotipo UI | 56px | 700 | 1.20 | Page titles |
| H2 | Globotipo UI | 32px | 700 | 1.20 | Section headings |
| H3 | Globotipo UI | 24px | 700 | 1.20 | Subsections |
| Body-lg | Globotipo UI | 20px | 400–700 | 1.20–1.50 | Main content |
| Body-md | Globotipo UI | 18px | 400–700 | 1.20–1.33 | General text |
| Body-sm | Globotipo UI | 16px | 400–700 | 1.20–1.50 | UI text |
| Caption | Globotipo UI | 14px | 400–700 | 1.20–1.50 | Meta info |
| Caption-xs | Globotipo UI | 12px | 400–700 | 1.20 | Labels |
| Button | opensans | 14px | 700 | 1.00 | CTA buttons |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 3px, 4px, 7.5px, 8px, 10px, 12px, 14px, 14.5px, 15px, 16px, 20px, 24px, 30px, 31.5px, 32px, 36px, 52px, 60px

Map:
- Button padding: 8px 16px
- Card padding: 20px
- Section gaps: 32px–60px

## Border Radius
- none: 0px — nav, tables
- sm: 3px — small UI
- md: 4px — buttons, small cards
- mdplus: 5px — inputs
- lg: 6px — buttons/images
- xl: 8px — badges, cards
- xxl: 12px — inputs, images
- pill: 20px — rounded pills
- full: 50% — avatars

## Shadows & Depth
- Inset light: rgba(206, 209, 215, 0.4) 0px 2px 2px inset
- Soft drop: rgba(0, 0, 0, 0.2) 0px 0px 10px 3px
- Light surface: rgb(235, 237, 239) 0px 0px 20px

## Components

### Primary Button (Cookie Consent)
Default: bg #0069de, color #ffffff, padding 8px 16px, radius 4px, font-weight 700, font-size 14px  
Hover: bg var(--theme-hover)  
Focus: outline none  
Active: outline none  
Disabled: reduce opacity

### Secondary Button (Headline Desktop)
Default: bg #006767, color #2f3134, padding 8px 16px, radius 8px  
Hover: bg rgba(0,49,255,0.1)  
Focus: no outline

### Navigation Links
Default: category color, no underline  
Hover: color #001f99, underline

### Input Fields
Variant 1: bg #f5f6f7, color #2f3134, radius 12px, no border  
Focus: border-color #0077ff  
Variant 2: bg #eeeeee, color #333333, radius 5px, padding 0 44px 0 16px

### Cards
Padding 20px, radius 8–12px, shadow soft drop

## Layout & Responsive Rules
- Breakpoints: 320px, 359px, 414px, 600px, 767px, 900px, 1024px, 1200px, 1320px
- Mobile padding: 16px
- Desktop padding: 32px
- Grid gap: multiples of 8px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: color change or subtle background
- No heavy motion; keep state changes snappy

## DO
- Use only defined palette
- Maintain 8px grid
- Always apply correct category color to links
- Keep button radii consistent with spec
- Use Globotipo UI for headings/body

## DON'T
- Invent new accent colors
- Mix sharp and rounded corners
- Apply heavy shadows
- Break spacing scale with arbitrary values

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0069de;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--theme-hover); }

.btn-secondary {
  background: #006767;
  color: #2f3134;
  padding: 8px 16px;
  border-radius: 8px;
}
.btn-secondary:hover { background: rgba(0,49,255,0.1); }

.input {
  background: #f5f6f7;
  color: #2f3134;
  border-radius: 12px;
  border: none;
}
.input:focus { border-color: #0077ff; outline: none; }

---

## 9. Summary

**TL;DR** — Globo’s design system is built for high-volume content. Dark neutrals anchor the UI, bright category colors signal meaning. Tight typography and an 8px spacing grid keep the feed readable. Every component is functional, not decorative.

**Brand Keywords**:  
- content-dense  
- category-coded  
- functional-neutral  
- newsroom-pragmatic  
- tightly-spaced