:root {
  /* Colors */
  --color-dark-gray: #333333;
  --color-white: #ffffff;
  --color-purple: #7c297d;
  --color-light-gray: #dddddd;
  --color-medium-gray: #555555;
  --color-primary-indigo: #282661;
  --color-accent-red: #d22128;
  --color-deep-indigo: #302d73;
  --color-orange: #DD552C;

  /* Typography */
  --font-montserrat: "Montserrat", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial;
  --font-open-sans: "Open Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial;
  --font-glyphicons: "Glyphicons Halflings";

  /* Spacing */
  --space-4: 4px;
  --space-4-5: 4.5px;
  --space-5: 5px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-36: 36px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-63-6: 63.6094px;
  --space-83-4: 83.4062px;
  --space-100: 100px;
  --space-103-2: 103.203px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 1px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 30px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.2) 0px 5px 15px 0px;
  --shadow-md: rgba(0,0,0,0.176) 0px 6px 12px 0px;
  --shadow-sm: rgba(0,0,0,0.2) 0px 3px 10px 0px;
}

# Apache Design System Specification

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

## Brand Context
Apache Software Foundation's visual identity is mature, community-driven, and functional. Colors are purposeful, typography is clear, and components are built for both technical and promotional contexts. The design balances authority with a touch of warmth via purple accents.

## Color Palette
- Dark Gray: #333333 — Neutral text/background in headers and navigation
- White: #ffffff — Page backgrounds, text on dark surfaces
- Brand Purple: #7c297d — CTA backgrounds, logo, accents
- Light Gray: #dddddd — Neutral surfaces
- Medium Gray: #555555 — Secondary text
- Primary Indigo: #282661 — Event info blocks, primary brand areas
- Accent Red: #d22128 — Alerts, urgent CTAs
- Deep Indigo: #302d73 — Hover/focus states
- Orange: #DD552C — Functional accent in CSS variable

## Typography
Font families:
- Headings: "Montserrat", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial
- Body/UI: "Open Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial
- Icons: "Glyphicons Halflings"

Type scale:
| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Large | 72px | 700 | 1.10 | Hero titles |
| Link Large | 63px | 700 | 1.00 | Hero links |
| H1 | 46.8px | 600-700 | 1.10 | Section titles |
| Subhead | 27px | 600 | 1.10 | Subsection titles |
| Body L | 20px | 700 | 1.35 | Emphasized body |
| Body M | 18px | 400-700 | 1.50 | General body |
| Caption | 14px | 700 | 1.10 | Labels/captions |
| Button | 14-16px | 600-700 | 1.39-1.43 | CTAs |

## Spacing & Grid
Base: 8px grid, with micro-steps (4px, 5px).
Tokens: 4px, 4.5px, 5px, 8px, 9px, 10px, 15px, 16px, 18px, 20px, 36px, 40px, 50px, 60px, 63.6px, 83.4px, 100px, 103.2px.
Map:
- Button padding: 8px/15px or 10px/20px
- Card padding: 15px or 20px
- Section gaps: 40px, 60px, 100px

## Border Radius
- none: 0 — menus, search boxes
- sm: 1px — spans
- md: 5px — small buttons
- lg: 8px — inputs, cards
- pill: 30px — buttons
- full: 50% — round icons

## Shadows & Depth
- Large: rgba(0,0,0,0.2) 0px 5px 15px 0px — cards
- Medium: rgba(0,0,0,0.176) 0px 6px 12px 0px — subtle elevation
- Small: rgba(0,0,0,0.2) 0px 3px 10px 0px — rare

## Component Specifications

### Primary Button (.btn)
Default:
- background: #7c297d
- color: #ffffff
- padding: 8px 15px
- border-radius: 30px
- font-weight: 700
- font-size: 14px
Hover:
- background: var(--color-purple)
- color: var(--pagefind-ui-primary)
- opacity: 0.7
Active:
- background: transparent
- color: #ffffff
Focus:
- color: var(--color-purple)
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px rgb(231,107,124)
- opacity: 0.9

### Secondary Button (.btn.btn--white)
Default:
- background: #ffffff
- color: #7c297d
- padding: 10px 20px
- border-radius: 30px
- font-weight: 700
- font-size: 16px
States: same as primary.

### Navigation Links
Variant behaviors:
- White text + underline → hover removes underline
- Purple text + underline → hover switches to white text
- Dark gray text, no underline → hover white text
- Light gray text + underline → hover white text

### Input Fields
- Border: 2px solid #eeeeee
- Radius: 8px
- Background: white
- Focus: change border color to brand accent (not specified), remove outline

### Cards
- Border: 1px solid #ffffff
- Shadow: rgba(0,0,0,0.2) 0px 5px 15px 0px
- Radius: 8px
- Padding: 15px or 20px

## Layout & Responsive Rules
Breakpoints:
- 414px, 480px — mobile
- 600px — large mobile
- 767px, 768px — tablet
- 800px — small desktop
- 991px, 992px — desktop
- 1199px, 1200px — large desktop

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus indicators: visible color change + shadow
- Loading states: maintain button size, swap label with spinner

## DO List
- Use only defined palette colors
- Maintain 8px grid with allowed micro-steps
- Use Montserrat for headings, Open Sans for body
- Keep button radius consistent at 30px
- Reserve accent red for alerts
- Ensure text contrast meets WCAG AA

## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners in same component
- Don’t overload pages with shadows
- Don’t reduce button padding below 8px vertically
- Don’t use brand purple for large text on dark backgrounds

## Code Examples

### Primary Button
```css
.btn {
  background: #7c297d;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn:hover {
  background: var(--color-purple);
  color: var(--pagefind-ui-primary);
  opacity: 0.7;
}
.btn:focus {
  color: var(--color-purple);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px rgb(231,107,124);
  opacity: 0.9;
}
```

### Secondary Button
```css
.btn--white {
  background: #ffffff;
  color: #7c297d;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
}
.btn--white:hover {
  background: var(--color-purple);
  color: var(--pagefind-ui-primary);
  opacity: 0.7;
}
```

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