:root {
  /* Colors */
  --color-primary: #fde8cc;
  --color-secondary: #ffffff;
  --color-dark-neutral: #3b3b3b;
  --color-light-neutral: #e8eaed;
  --color-mid-neutral: #d5d5d5;
  --color-black: #000000;
  --color-neutral-grey: #555555;
  --color-cream-hover: #fef4e6;
  --color-accent-orange: #fac680;
  --color-accent-blue: #005fcc;
  --volume-back-color: #747474;
  --bg-menu: #fafafa;
  --skeleton-bg-2: #f5f5f5;
  --progess-back-color: #4a506e;
  --color-btn-game-card: #555555;
  --background-color-identity: #2d2f31;
  --swiper-theme-color: #007aff;
  --new-btn-text: #f68e01;
  --volume-up-color: #ffffff;
  --button-alert-hover-bg: #fef4e6;
  --newsletter-btn-color: #707070;
  --color-button: #000000;
  --text-tooltip: #c4c7c5;
  --progess-up-color: #ad6400;
  --border-color: #fabb67;
  --bg-exclusive: #fdf1e0;
  --text-color-continue: #9aa0a6;
  --bg-background-face: rgba(66,133,244,0.04);
  --border-bottom-color: #c2c2c2;
  --bg-tooltip-password: rgba(85,85,85,0.9);

  /* Typography */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4_79: 4.79688px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-23_79: 23.7969px;
  --space-28_59: 28.5938px;
  --space-32: 32px;
  --space-40: 40px;
  --space-57_18: 57.1875px;
  --space-156_37: 156.375px;
  --space-160_87: 160.875px;
  --space-218_25: 218.25px;
  --space-333: 333px;

  /* Radius */
  --radius-small: 3px;
  --radius-medium: 12px;
  --radius-large: 32px;
  --radius-xlarge: 50px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.5) 0px -4px 12px -4px, rgba(0, 0, 0, 0.3) 0px 4px 8px -3px;
}

# Infobae Design System Specification

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

## Brand Context
Infobae’s design blends warm muted oranges with functional neutrals to make high-volume news approachable. Typography is sans-serif, with Roboto as the workhorse for headlines and body. Layout uses rounded pills and soft borders to reduce sharpness in dense content grids.

## Color Palette
- Primary Warm Light: #fde8cc — Primary buttons, CTA backgrounds
- Secondary White: #ffffff — Page background, cards
- Dark Neutral: #3b3b3b — Body text, identity buttons
- Light Neutral: #e8eaed — Footer background, social icons
- Mid Neutral: #d5d5d5 — Divider lines, input borders
- Black: #000000 — High emphasis text/icons
- Neutral Grey: #555555 — Hover/focus states for text
- Cream Hover: #fef4e6 — Hover background for buttons
- Accent Orange: #fac680 — Hover/focus accents
- Accent Blue: #005fcc — Secondary action focus
- Volume Back: #747474 — Media player volume track
- Menu BG: #fafafa — Dropdown menus
- Skeleton BG 2: #f5f5f5 — Loading placeholders
- Progress Back: #4a506e — Media progress background
- Game Card Button: #555555 — Specialized game card buttons
- Identity BG: #2d2f31 — Identity/login panel
- Swiper Theme: #007aff — Carousel active indicators
- New Button Text: #f68e01 — "New" labels
- Volume Up Color: #ffffff — Volume button icon
- Newsletter Button: #707070 — Newsletter signup text
- Text Tooltip: #c4c7c5 — Tooltip label
- Progress Up Color: #ad6400 — Media progress fill
- Border Color: #fabb67 — Accent borders
- Exclusive Bg: #fdf1e0 — Exclusive feature blocks
- Continue Text: #9aa0a6 — Secondary link text
- Background Face: rgba(66,133,244,0.04) — Subtle face recognition background
- Border Bottom Color: #c2c2c2 — Table/footer borders
- Password Tooltip BG: rgba(85,85,85,0.9) — Password field tooltip

## Typography
- Primary Font: 'Roboto', sans-serif
- Secondary Font: Arial, sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 42px | 700 | 1.20 | Main headlines |
| H2 | 22px | 700 | 1.30 | Section titles |
| Nav Label | 22px | 700 | 1.30 | Uppercase category labels |
| Subhead | 20px | 400 | — | Article teasers |
| Subhead Uppercase | 20px | 700 | 1.30 | Category teasers |
| Body Large | 18px | 300 | 1.50 | Intro paragraphs |
| Body Bold | 18px | 700 | 1.30 | Lead summaries |
| Button Text | 16px | 400 | — | CTA labels |
| Link Text | 16px | 400 | — | Inline links |
| Button Alt Font | 16px | 300 | — | Secondary CTAs |
| Small Button Uppercase | 14px | 400 | — | Tag buttons |
| Caption Medium | 14px | 500 | 1.30 | Metadata |
| Caption Light | 14px | 300 | 1.70 | Supplemental info |
| Caption Regular | 14px | 400 | 1.14 | Misc captions |
| Small Caption | 12px | 300 | 1.30 | Minor metadata |
| Micro Caption | 11px | 400 | 1.70 | Footer info |

## Spacing & Grid
Base unit: 8px
Scale: 1px, 2px, 4.8px, 5px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 23.8px, 28.6px, 32px, 40px, 57.2px, 156.4px, 160.9px, 218.3px, 333px
Use multiples of 8px for major layout grid. Decimal values are responsive offsets.

## Border Radius
- xs: 3px — Cards, small divs
- sm: 12px — Medium divs
- md: 32px — Large buttons
- lg: 50px — Circular buttons
- full: 100px — Pill buttons, avatars

## Shadows & Depth
- sm: rgba(0,0,0,0.15) 0px 2px 4px — Subtle container depth
- lg: rgba(0,0,0,0.5) -4px 12px, rgba(0,0,0,0.3) 4px 8px — High emphasis

## Component Specifications

### Primary Button
Default: bg #fde8cc, color #3b3b3b, padding 0, radius 100px, border 1px solid #fde8cc  
Hover: bg #f9d78e, border 1px solid var(--gray-30)  
Active: bg rgba(246,142,1,0.1), border 1px solid var(--orange-100)  
Focus: bg rgba(2,132,12,0.1), border 1px solid var(--gray-30)  

### Secondary Button
Default: bg #ffffff, color #3b3b3b, radius 100px, border 1px solid #c2c2c2  
Same hover/active/focus as primary.

### Navigation Links
Default: color #1f1f1f, no underline  
Hover: color #777777

### Input Fields
Border: 1px solid #d5d5d5, radius 3px, padding 8px, font-size 14px  
Focus: border-color #fac680, background #fef4e6

### Cards
Bg #ffffff, radius 3px, border-bottom 1px solid #d5d5d5, padding 12px

## Layout & Responsive Rules
Mobile: < 768px  
Tablet: 768px–1024px  
Desktop: >1025px  
Page padding: 12px mobile, 20px desktop  
Grid gap: 12px content blocks

## Interaction Rules
- Transition: 150ms ease for hover/focus/active state changes  
- Focus indicators: 1px solid accent color, bg lighten 10%  
- Disabled: 50% opacity

## DO List
- Use only defined palette colors
- Maintain 8px grid spacing
- Keep CTA buttons pill-shaped (100px radius)
- Uppercase category labels at 22px/700
- Ensure contrast ratios meet WCAG AA
- Use Roboto everywhere except specific Arial cases

## DON'T List
- Don’t use shadows for base layout — only for emphasis
- Don’t mix sharp corners with pill buttons
- Don’t invent shades outside palette
- Don’t remove hover states from CTAs
- Don’t compress text below 11px

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #fde8cc;
  color: #3b3b3b;
  border-radius: 100px;
  border: 1px solid #fde8cc;
  font: 400 14px 'Roboto', sans-serif;
  padding: 0;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #f9d78e;
  border-color: var(--gray-30);
}
.btn-primary:focus {
  background: rgba(2,132,12,0.1);
  border-color: var(--gray-30);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 3px;
  border-bottom: 1px solid #d5d5d5;
  padding: 12px;
}
```

Input:
```css
.input {
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  padding: 8px;
  font: 400 14px 'Roboto', sans-serif;
}
.input:focus {
  border-color: #fac680;
  background: #fef4e6;
  outline: none;
}
```