:root {
  /* Colors - Semantic */
  --color-primary: #000000;
  --color-brand-violet: #7900f2;
  --color-white: #ffffff;
  --color-indigo-gray: #564c90;
  --color-near-black: #040112;
  --color-deep-navy: #07021f;
  --color-event-hover: #334aff;
  --color-event-hover-cc: #334affcc;
  --color-icon-secondary: #bababa;
  --color-event-icon-primary: #141827;
  --color-text-secondary-date: #5d5d5d;
  --color-icon-alt: #757575;
  --color-error-red: #da394d;
  --color-bg-secondary-datepicker: #f7f6f6;
  --color-border-secondary: #e4e4e4;
  --color-border-default: #d5d5d5;
  --color-scroll-track: rgba(0,0,0,0.25);
  --color-bg-error: #da394d14;
  --color-bg-transparent: #fff9;
  --color-bg-multiday: #1418273d;
  --color-bg-multiday-hover: #14182757;
  --color-bg-primary-multiday: #334aff3d;
  --color-bg-primary-multiday-hover: #334aff57;

  /* Typography */
  --font-gt-america: "GT America", sans-serif;
  --font-ui-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-proxima-nova: "Proxima Nova", sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-112: 112px;
  --space-115-328: 115.328px;
  --space-128: 128px;
  --space-144: 144px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-heavy: rgba(0,0,0,0.2) 0px 2px 15px 0px;
  --shadow-light: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.06) 0px 1px 2px 0px;
}

# NAI Design System Specification

You are a Networkadvertising (NAI) design expert. Build UIs matching their visual language exactly.

## Brand Context
NAI’s design language is professional, minimal, and structured. It uses a monochrome base with vivid violet accents for brand personality. Typography is clean and authoritative, spacing is disciplined on an 8px grid.

## Color Palette
- Primary Black: #000000 — Default text, primary links
- Brand Violet: #7900f2 — Accent links, brand elements
- White: #ffffff — Page backgrounds, text on dark surfaces
- Indigo-Gray: #564c90 — Hover/focus link state
- Near-Black: #040112 — Hover/focus dark backgrounds
- Deep Navy: #07021f — Darker UI states
- Event Hover Blue: #334aff — Interactive hover accents
- Event Hover CC Blue: #334affcc — Link accent hover
- Secondary Icon Gray: #bababa — UI icons
- Event Icon Primary: #141827 — Event icon color
- Text Secondary Gray: #5d5d5d — Secondary text like dates
- Icon Alt Gray: #757575 — Alternative icon color
- Error Red: #da394d — Validation errors, destructive actions
- Background Secondary Datepicker: #f7f6f6 — Datepicker panels
- Border Secondary: #e4e4e4 — Dividers
- Border Default: #d5d5d5 — Default outlines
- Scroll Track: rgba(0,0,0,0.25) — Scroll UI
- Background Error: #da394d14 — Error overlays
- Background Transparent: #fff9 — Transparent overlays
- Background Multiday: #1418273d — Calendar multiday events
- Background Multiday Hover: #14182757 — Calendar hover state
- Background Primary Multiday: #334aff3d — Calendar primary events
- Background Primary Multiday Hover: #334aff57 — Calendar hover primary events

## Typography
- Headings: GT America (Adobe Fonts)
- Body/UI: ui-sans-serif system stack
- Special: Proxima Nova (occasional headings)

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 Hero | GT America | 72px | 700 | 1.00 | Page titles |
| H1 Large | GT America | 60px | 700 | 1.00 | Section hero |
| H1 Medium | GT America | 48px | 700 | 1.25 | Major section headings |
| H1 Small | GT America | 36px | 700 | 1.11 | Subsections |
| Link XL | ui-sans-serif | 30px | 500 | 1.20 | Navigation links |
| H1/Link Med | GT America | 30px | 700 | 1.20 | Subheadings |
| Button Lg | GT America | 24px | 700 | 1.33 | Primary buttons |
| H1 Small UI | ui-sans-serif | 20px | 700 | 1.40 | UI headings |
| Link Md | ui-sans-serif | 18px | 700 | 1.56 | Inline links |
| Body | ui-sans-serif | 16px | 400 | 1.50 | Paragraphs |
| Caption | ui-sans-serif | 14px | 400 | 1.43 | Small labels |

## Spacing & Grid
Base: 8px grid. Values: 4, 6, 8, 10, 12, 16, 24, 28, 32, 40, 48, 64, 80, 112, 115.328, 128, 144px.
Use multiples of 8px for all spacing. 4px for micro-gaps, 32px+ for section spacing.

## Border Radius
- sm: 6px — Menus
- full: 9999px — Pills, avatars

## Shadows & Depth
- Heavy: rgba(0,0,0,0.2) 0px 2px 15px — Modals, cards
- Light: rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.06) 0px 1px 2px — Light elevation

## Component Specifications

### Primary Button
```css
.btn-primary {
  font-family: var(--font-gt-america);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-32);
  background: var(--color-brand-violet);
  color: var(--color-white);
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--color-indigo-gray); }
.btn-primary:focus { outline: 2px solid var(--color-event-hover); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
```css
.nav-link {
  font-weight: 400;
  color: var(--color-primary);
  text-decoration: none;
}
.nav-link:hover { color: rgba(107,114,128,1); }
```

### Card
```css
.card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-heavy);
  padding: var(--space-32);
}
```

## Layout & Responsive Rules
Max content width: 1280px.
Padding: 16px mobile / 32px desktop.
Breakpoints: 500px, 600px, 640px, 768px, 781px, 782px, 1024px, 1280px.

## Interaction Rules
- Transition timing: 150ms ease for hover and focus
- Focus indicators: 2px solid accent colors
- Loading states: Reduce opacity

## DO List
- Use ONLY colors from the palette—no custom colors
- Maintain 8px grid—all spacing must be multiples of 8px
- Use GT America for headings, ui-sans-serif for body
- Keep link hover color as gray, no underline
- Apply full-radius for pills consistently

## DON'T List
- Don’t mix rounded and sharp corners in the same component
- Don’t use shadows on text
- Don’t invent new accent colors
- Don’t remove padding from buttons—they rely on spacing for visual balance

## Code Examples

### Primary Button
```css
<button class="btn-primary">Submit</button>
```

### Card Container
```css
<div class="card">Content here</div>
```

### Form Input
```css
.input {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-12);
  font-size: 16px;
}
.input:focus {
  border-color: var(--color-event-hover);
  outline: none;
}
```