:root {
  /* Colors */
  --color-navy: #183153;
  --color-teal: #0ca678;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bright-blue: #146ebe;
  --color-gray-light: #c3c6d1;
  --color-slate-muted: #616d8a;
  --color-offwhite: #f0f1f3;
  --color-purple: #6741d9;
  --color-mint: #63e6be;
  --color-gold: #fab005;
  --color-sky-blue: #74c0fc;
  --color-hover-blue: #156ebe;
  --color-hover-blue-alt: #156ebd;
  --color-hover-light-blue: #72befb;

  /* Typography */
  --font-primary: "cera-round-pro", Helvetica Neue, Helvetica, Arial;
  --font-secondary: "Aktiv Grotesk", Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-mono: Menlo, Monaco, Consolas, Courier New;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-10_5: 10.5px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-15: 15px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-32: 32px;

  /* Shadows */
  --shadow-navy: 0px 6px 0px 0px #183153;
  --shadow-inset-offwhite: inset 0px 4px 0px 0px #f0f1f3;
}

# Font Awesome Design System Specification

System Prompt:
You are a Font Awesome design expert. Build UIs matching their visual language exactly.

Brand Context:
Font Awesome’s design is developer-focused, bold, and friendly. Strong outlines, clear typography, and high-contrast colors make components readable at a glance. Rounded geometric type softens the assertive colors.

Color Palette:
- Deep Navy: #183153 — Headers, borders, primary text
- Teal: #0ca678 — Accent buttons, interactive highlights
- White: #ffffff — Backgrounds, text on navy
- Black: #000000 — Body text, icons
- Bright Blue: #146ebe — Links, select icon style buttons
- Light Gray: #c3c6d1 — Secondary buttons, neutral borders
- Muted Slate: #616d8a — Neutral text, disabled states
- Off-White: #f0f1f3 — Cards, secondary backgrounds
- Purple: #6741d9 — Accent section headers
- Mint: #63e6be — CTA buttons, card accents
- Gold: #fab005 — Highlight buttons, card accents
- Sky Blue: #74c0fc — Info buttons, tabs
- Hover Blue: #156ebe — Link hover/focus
- Hover Blue Alt: #156ebd — Link hover/focus
- Hover Light Blue: #72befb — Link hover/focus

Typography:
- Primary font: "cera-round-pro", Helvetica Neue, Helvetica, Arial
- Secondary font: "Aktiv Grotesk", Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
- Monospace: Menlo, Monaco, Consolas, Courier New

| Level | Size | Weight | Line Height | Use For |
| H1 | 40px | 700 | 1.13 | Page titles |
| H2 | 32px | 700 | 1.19 | Section titles |
| Body | 16px | 400 | 1.50 | Paragraph text |
| Button | 16px | 600 | 1.50 | CTA buttons |
| Caption | 12px | 700 | 1.00 | Uppercase labels |

Spacing & Grid:
Base: 8px. Scale includes: 1px, 3px, 4px, 6px, 7.5px, 8px, 10px, 10.5px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 28px, 32px, 40px, 48px, 64px.

Border Radius:
- none: 0px — square elements
- sm: 2px — badges
- md: 8px — small buttons
- lg: 12px — cards, primary buttons
- pill: 32px — pill inputs

Shadows & Depth:
- Navy shadow: 0px 6px 0px #183153 on buttons
- Inset off-white: inset 0px 4px 0px #f0f1f3 on inputs

Component Specifications:

Primary Button:
Default: bg #63e6be, text #183153, padding 15px 24px, radius 12px, border 2px solid #183153, shadow navy.
Hover: scale 1.05, bg #405261, border same as default.
Active: scale 0.925, no shadow.
Focus: outline per --focus-outline, keep border.

Secondary Button:
Default: bg #c3c6d1, text #183153, padding 12px 20px, radius 12px, border #c3c6d1.
Hover: bg white, text #183153.

Navigation Links:
Default: navy or teal text with dotted underline.
Hover: color change via --ad-link-hover-color.

Input Fields:
Text: 32px radius, 2px navy border, inset off-white shadow.
Focus: outline offset, no background change.

Cards:
Off-white bg, 12px radius, 2px border #f0f1f3, no shadow.

Layout & Responsive Rules:
Breakpoints: 450px, 740px, 750px, 768px, 1151px, 1152px, 1536px, 2000px.
Mobile-first scaling.

Interaction Rules:
Transition: 150ms ease on hover and focus.
Focus indicators: double outline via focus-outline variables.

DO List:
- Use only colors from palette.
- Maintain 8px spacing multiples.
- Use cera-round-pro for all headings and body text.
- Apply 12px radius to primary components.
- Keep shadows flat and offset, no blur.

DON'T List:
- Don’t use custom colors.
- Don’t mix sharp and rounded corners in same component.
- Don’t add drop shadows with blur.
- Don’t lower contrast below WCAG AA.

Code Examples:

```css
.btn-primary {
  background: #63e6be;
  color: #183153;
  padding: 15px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid #183153;
  box-shadow: 0px 6px 0px #183153;
  transition: transform 150ms ease;
}
.btn-primary:hover { transform: scale(1.05); background: #405261; }
.btn-primary:focus { outline: 2px solid #183153; outline-offset: 2px; }
```

```css
.card {
  background: #f0f1f3;
  border-radius: 12px;
  border: 2px solid #f0f1f3;
  padding: 20px;
}
```

```css
.input-text {
  border: 2px solid #183153;
  border-radius: 32px;
  padding: 18px 24px;
  background: #ffffff;
  box-shadow: inset 0px 4px 0px #f0f1f3;
}
.input-text:focus { outline: 2px solid #183153; }
```