:root {
  /* Colors */
  --color-primary: #ff0084;
  --color-dark-gray: #333333;
  --color-light-beige: #d9d7ce;
  --color-deep-charcoal: #232323;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-black: #000000;
  --color-medium-gray: #75746c;
  --color-bright-blue: #3898ec;
  --color-deep-blue: #0e5ac0;
  --color-deep-blue-alt: #0e59c0;
  --color-neutral-gray: #464544;
  --color-warm-gray: #484846;
  --color-charcoal-gray: #474645;
  --color-charcoal-gray-alt: #474745;
  --color-neutral-gray-alt: #464543;
  --color-warm-gray-alt: #484746;
  --color-accent-blue: #0967e7;

  /* Typography */
  --font-primary: "Proxima Nova", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-1: 1px;
  --space-2-4: 2.4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-9-6: 9.6px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-16-26: 16.2656px;
  --space-18: 18px;
  --space-19-2: 19.2px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28-8: 28.8px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-xl: 10px;
  --radius-search-btn: 0px 6px 6px 0px;
  --radius-input: 6px 0px 0px 6px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(32, 53, 90, 0.08) 4px -19px 35px, rgba(32, 53, 90, 0.15) 11px 11px 30px -10px;
  --shadow-small: rgba(0, 0, 0, 0.2) 0px 1px 5px;
  --shadow-tiny: rgba(0, 0, 0, 0.2) 0px 0px 4px;
}

# Flickr Design System Specification

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

## Brand Context
Flickr values utility, clarity, and a community-driven visual identity. The design is functional with strong color cues for interaction and typography-driven hierarchy. The goal: keep photography front and center while making navigation and actions obvious.

## Color Palette
- Primary Magenta: #ff0084 — Primary CTAs, key buttons
- Dark Gray: #333333 — Global text, logo
- Light Beige: #d9d7ce — Neutral backgrounds, footer text
- Deep Charcoal: #232323 — Navigation, search buttons
- White: #ffffff — Text on dark, backgrounds
- Link Blue: #0000ee — Default links
- Black: #000000 — Utility borders/text
- Medium Gray: #75746c — Secondary text
- Bright Blue: #3898ec — Hover/focus accents
- Deep Blue: #0e5ac0 — Hover/focus accents
- Deep Blue Alt: #0e59c0 — Hover/focus accents
- Neutral Gray: #464544 — Hover/focus accents
- Warm Gray: #484846 — Hover/focus accents
- Charcoal Gray: #474645 — Hover/focus accents
- Charcoal Gray Alt: #474745 — Hover/focus accents
- Neutral Gray Alt: #464543 — Hover/focus accents
- Warm Gray Alt: #484746 — Hover/focus accents
- Accent Blue: #0967e7 — Secondary actions, hover states

## Typography
Font family: "Proxima Nova", Arial, sans-serif. Weights: 300, 400, 600, 700.  
Type sizes and usage:

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 148.8px | 700 | 0.70 | Hero titles |
| H1 Large | 126.72px | 700 | 0.40 | Large headings |
| H1 Medium | 115.2px | 700 | 0.75 | Section titles |
| Subheading | 30px | 300 | 1.30 | Subhead text |
| Button/Large Link | 24px | 400 | 0.83 | Primary buttons |
| Uppercase Link | 21.6px | 400 | 0.93 | Nav links |
| Body | 19.2px | 400 | 1.04 | Standard body text |
| Caption | 10px | 400 | 1.82 | Image captions |

## Spacing & Grid
Base: 8px grid. Tokens: 1px, 2.4px, 6px, 8px, 9px, 10px, 12px, 16px, 18px, 20px, 24px, 30px, 40px, 48px, 60px. Use multiples for padding/margins.

## Border Radius
- Search Button: 0px 6px 6px 0px
- Small: 2px — small buttons
- Medium: 5px — standard buttons
- Large: 7px — pro buttons
- Input: 6px 0px 0px 6px
- Full: 50% — avatars

## Shadows & Depth
Minimal shadows:
- Soft: rgba(32,53,90,0.08) 4px -19px 35px, rgba(32,53,90,0.15) 11px 11px 30px -10px
- Small: rgba(0,0,0,0.2) 0px 1px 5px
- Tiny: rgba(0,0,0,0.2) 0px 0px 4px

## Component Specifications

### Primary Button
Default: bg #ff0084, text #ffffff, padding 9px 24px, radius 5px, border none, font-weight 700, font-size 21.6px.  
Hover: text #0967e7, bg transparent, opacity 0.6.  
Focus: white + #3699f1 box shadow.

### Secondary Button (Pro)
Default: bg #0967e7, text #ffffff, padding 18px 24px, radius 7px, border none, font-weight 700, font-size 16px.  
Hover: text #0967e7, bg transparent, opacity 0.6.  
Focus: same as primary.

### Search Button
Default: bg #232323, text #ffffff, radius 0px 6px 6px 0px, padding 0px, font-size 24px.

### Navigation Links
Default: color #333333, no underline. Hover: color #0967e7.

### Input Fields
Default: bg #4a4947, text #d9d7ce, border 2px solid #232323, radius 6px 0px 0px 6px, padding 12px 18px.  
Transparent variant: bg rgba(217,215,206,0.31), padding 12px.

### Cards
Background: #ffffff or #d9d7ce, radius 5px, padding multiples of 8px, optional soft shadow.

## Layout & Responsive Rules
Breakpoints: 320px, 425px, 640px, 700px, 768px, 991px, 1024px, 1280px, 1440px, 1920px.  
Container widths adjust per breakpoint.

## Interaction Rules
Transitions: 150ms ease for hover/focus state changes.  
Focus indicators: visible box shadow with accent blue.

## DO List
- Use only colors from palette
- Maintain 8px spacing grid
- Use Proxima Nova for all text
- Keep uppercase headings for main titles
- Preserve border radius styles per component
- Use hover/focus color changes for affordance

## DON'T List
- Don't use gradients
- Don't invent new colors
- Don't mix sharp and rounded corners inconsistently
- Don't remove hover states
- Don't use shadows heavily — keep depth subtle

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ff0084;
  color: #ffffff;
  padding: 9px 24px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 21.6px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #0967e7;
  background: transparent;
  opacity: 0.6;
}
.btn-primary:focus {
  box-shadow: #ffffff 0px 0px 0px 1px, #3699f1 0px 0px 0px 4px;
  outline: none;
}
```

### Input Field
```css
.input {
  background-color: #4a4947;
  color: #d9d7ce;
  border: 2px solid #232323;
  border-radius: 6px 0px 0px 6px;
  padding: 12px 18px;
}
.input:focus { outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 5px;
}
```