:root {
  /* Colors */
  --color-primary-dark-blue: #4F5B93;
  --color-blue-medium: #336699;
  --color-light-gray: #CCCCCC;
  --color-dark-magenta: #793862;
  --color-light-blue: #C3D3F8;
  --color-white: #FFFFFF;
  --color-very-light-blue: #DBE1FF;
  --color-muted-periwinkle: #90A0D0;
  --color-medium-magenta: #AE508D;
  --color-very-pale-blue: #F0F2FF;
  --color-pale-blue-tint: #F1F3FF;
  --color-soft-lavender: #94A3ED;
  --color-dark-gray: #666666;
  --color-background-text: #CCC;
  --color-content-text: #333;
  --color-light-magenta: #CF82B1;
  --color-light-blue-var: #E2E4EF;
  --color-medium-blue-var: #7A86B8;

  /* Typography */
  --font-family-primary: "Fira Sans", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* Spacing */
  --space-1: 1px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-28: 28px;
  --space-48: 48px;
  --space-60: 60px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill-30: 30px;
  --radius-pill-32: 32px;

  /* Shadows */
  --shadow-light-1: rgba(0,0,0,0.2) 0px 2px 4px 0px;
  --shadow-light-2: rgba(0,0,0,0.1) 0px 4px 4px 0px;
}

# PHP Design System Specification

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

## Brand Context
PHP’s design language is functional, developer-focused, and friendly. It uses a muted blue-purple primary with magenta accents, consistent 8px spacing, and a single sans-serif family across all UI. Rounded pill buttons highlight calls to action.

## Color Palette
- Primary Dark Blue: #4F5B93 — Primary buttons, hero sections
- Blue Medium: #336699 — Links, borders
- Light Gray: #CCCCCC — Secondary text, icons, dividers
- Dark Magenta: #793862 — Titles, dotted header borders
- Light Blue: #C3D3F8 — Background panels
- White: #FFFFFF — Text on dark backgrounds
- Very Light Blue: #DBE1FF — Link text on dark backgrounds
- Muted Periwinkle: #90A0D0 — Low-contrast backgrounds
- Medium Magenta: #AE508D — Hover/focus states
- Very Pale Blue: #F0F2FF — Hover backgrounds
- Pale Blue Tint: #F1F3FF — Hover backgrounds
- Soft Lavender: #94A3ED — Hover outlines
- Dark Gray: #666666 — Button text
- Background Text: #CCC — Background text
- Content Text: #333 — Body text
- Light Magenta: #CF82B1 — Hover link color
- Light Blue Var: #E2E4EF — Background surfaces
- Medium Blue Var: #7A86B8 — Secondary elements

## Typography
Font Family: "Fira Sans", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Hero | 160px | 400 | 0.70 | Main splash text |
| H1 | 24px | 400 | 2.00 | Section headings |
| Link Large | 24px | 400 | 2.00 | Prominent nav |
| Button Large | 20px | 400 | 1.20 | Hero CTA |
| H1 Small | 18px | 400 | 1.50 | Subheadings |
| Link Med | 18px | 400 | 1.33 | Secondary nav |
| Link Base | 16px | 400 | 1.50 | Body links |
| Button Base | 16px | 400 | - | Standard buttons |
| Caption | 14px | 400 | 1.71 | Metadata |
| Button Small | 14px | 400 | 1.71 | Compact buttons |

## Spacing & Grid
Base: 8px. Scale: 1px, 8px, 12px, 16px, 18px, 24px, 28px, 48px, 60px.

Map:
- Button padding: 8px / 16px 32px
- Section gaps: 24px, 48px
- Hero padding: 60px

## Border Radius
- sm: 4px — kbd elements
- md: 8px — forms, buttons
- lg: 16px — dialogs
- pill-30: 30px — hero buttons
- pill-32: 32px — pill buttons

## Shadows & Depth
- rgba(0,0,0,0.2) 0px 2px 4px 0px
- rgba(0,0,0,0.1) 0px 4px 4px 0px

## Component Specifications

### Primary Button (Hero)
Default:
- background: #4F5B93
- color: #FFFFFF
- padding: 16px 32px
- border-radius: 30px
- border: none
Hover:
- background: var(--dark-magenta-color)
- transform: scale(1.1)
Focus: same as hover
Active: outline: none

### Secondary Button (Hero)
Default:
- background: transparent
- color: #B8C0E9
- padding: 16px 32px
- border-radius: 30px
- border: 1px solid #6775AD
Hover/Focus:
- background: var(--dark-magenta-color)
- color: #FFFFFF
- transform: scale(1.1)

### Navbar Search Button
Default:
- background: #404F82
- color: #B9C3F4
- padding: 8px
- border-radius: 8px
- border: 1px solid #6A78BE

### Navigation Links
Default color varies by context; hover typically changes to #CF82B1 or white depending on background.

## Layout & Responsive Rules
Breakpoints: 425px, 465px, 480px, 540px, 760px, 767px, 768px, 784px, 979px, 980px, 992px, 1024px, 1200px, 1500px, 1548px.

## Interaction Rules
- Transition: transform/background 150ms ease
- Focus: no outline, color change to hover state
- Hover: scale 1.1 for hero buttons

## DO List
- Use only defined hex values
- Keep spacing multiples of 8px
- Maintain consistent font family
- Use magenta only for hover/focus
- Keep buttons rounded as per spec

## DON'T List
- Don’t introduce new colors
- Don’t mix sharp and pill corners arbitrarily
- Don’t use heavy shadows
- Don’t reduce line height below spec

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #4F5B93;
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover, .btn-primary:focus {
  background: #AE508D;
  transform: scale(1.1);
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #B8C0E9;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 20px;
  font-weight: 400;
  border: 1px solid #6775AD;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: #AE508D;
  color: #FFFFFF;
  transform: scale(1.1);
}
```

### Input Field
```css
.input {
  border: 1px solid #6A78BE;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
  font-family: var(--font-family-primary);
}
.input:focus {
  border-color: #AE508D;
  outline: none;
}
```