--bg-primary: #FFFFFF;
--bg-secondary: #F8F9FA;
--bg-tertiary: #F0F1F3;
--text-primary: #1A1A1A;
--text-secondary: #6B7280;
--text-tertiary: #9CA3AF;
--border-default: #E5E7EB;
--border-strong: #D1D5DB;

--bg-primary: #0F0F0F;
--bg-secondary: #1A1A1A;
--bg-tertiary: #262626;
--text-primary: #FFFFFF;
--text-secondary: #A1A1AA;
--text-tertiary: #71717A;
--border-default: #27272A;
--border-strong: #3F3F46;

/* Default (Oxford Pierpont example) */
--accent-1: #1A1A1A;     /* Primary actions, headers */
--accent-2: #6B7280;     /* Secondary elements */
--accent-3: #3B82F6;     /* Highlights, links */

/* Alternative example (Blue/Gold brand) */
--accent-1: #1a4a6e;     /* Primary */
--accent-2: #b8860b;     /* Secondary/Gold */
--accent-3: #2980b9;     /* Highlight */

--success: #10B981;
--success-bg: #ECFDF5;
--warning: #F59E0B;
--warning-bg: #FFFBEB;
--error: #EF4444;
--error-bg: #FEF2F2;
--info: #3B82F6;
--info-bg: #EFF6FF;

/* Primary (UI) */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Secondary (Headings in PDFs) */
--font-serif: 'Playfair Display', Georgia, serif;

/* Monospace (Code, data) */
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;

--width-narrow: 480px;    /* Forms, modals */
--width-medium: 720px;    /* Content areas */
--width-wide: 1024px;     /* Dashboard panels */
--width-full: 1280px;     /* Maximum content width */

Background: var(--accent-1)
Text: White (or contrasting)
Padding: 12px 24px
Border-radius: 6px
Font: 14px/500
Hover: 10% darker
Active: 15% darker
Disabled: 50% opacity

Background: transparent
Border: 1px solid var(--border-strong)
Text: var(--text-primary)
Padding: 12px 24px
Border-radius: 6px
Hover: var(--bg-secondary)

Background: transparent
Text: var(--text-secondary)
Padding: 12px 24px
Hover: var(--bg-secondary)

Background: var(--bg-primary)
Border: 1px solid var(--border-default)
Border-radius: 6px
Padding: 12px 16px
Font: 14px
Focus: border-color var(--accent-3), ring 2px var(--accent-3) at 20% opacity
Error: border-color var(--error)

Same as text input
Chevron icon on right
Dropdown: var(--bg-primary), shadow, max-height 300px

Same as text input
Min-height: 120px
Resize: vertical only

Background: var(--bg-primary)
Border: 1px solid var(--border-default)
Border-radius: 8px
Padding: 24px

Same as default
Hover: border-color var(--border-strong), subtle lift shadow
Cursor: pointer

Header row:
  Background: var(--bg-secondary)
  Text: var(--text-secondary), 12px, uppercase, 500
  Padding: 12px 16px

Body rows:
  Background: var(--bg-primary)
  Border-bottom: 1px solid var(--border-default)
  Padding: 16px
  Hover: var(--bg-secondary)
  
Columns:
  Company: Primary text, 14px/500
  Contact: Secondary text, 14px/400
  Phone: Secondary text, 14px/400
  Action: Ghost button "View Dashboard →"

Pending:    bg var(--bg-tertiary), text var(--text-secondary)
Generating: bg var(--info-bg), text var(--info), animated pulse
Ready:      bg var(--success-bg), text var(--success)
Distributed:bg var(--accent-3) at 10%, text var(--accent-3)
Failed:     bg var(--error-bg), text var(--error)

Container: Vertical list, gap 8px

Step item (pending):
  Circle: 24px, border 2px var(--border-default), text var(--text-tertiary)
  Label: var(--text-tertiary)
  
Step item (active):
  Circle: 24px, bg var(--accent-3), spinner inside
  Label: var(--text-primary), font-weight 500
  Detail: var(--text-secondary), 13px
  
Step item (complete):
  Circle: 24px, bg var(--success), checkmark icon white
  Label: var(--success)

Track: height 4px, bg var(--bg-tertiary), border-radius 2px
Fill: bg var(--accent-3), transition width 300ms ease

Layout: Centered card on full-screen background

Background: 
  Light mode: var(--bg-secondary)
  Dark mode: var(--bg-primary)

Card:
  Width: 400px
  Padding: 48px
  
Content:
  1. Logo (horizontal, centered, mb-32)
  2. Heading "Sign In" (h2, mb-24)
  3. Email input (mb-16)
  4. Password input (mb-24)
  5. Primary button "Sign In" (full width)
  6. "Forgot password?" link (caption, centered, mt-16)

Layout: Full width with max-width container

Header:
  Height: 64px
  Left: Logo (horizontal)
  Right: Settings icon, User avatar dropdown
  Border-bottom: 1px solid var(--border-default)

Main content:
  Padding-top: 32px
  
  Title section:
    h1: "Your Clients"
    Subtitle: "Select a client to view their dashboard"
    Gap: 8px
    Margin-bottom: 24px
  
  Client table:
    Full width
    Columns: Company (40%), Contact (25%), Phone (20%), Action (15%)
    Rows: Hover state, click anywhere to view dashboard

Layout: Two-column (sidebar + main)

Sidebar (280px fixed):
  Background: var(--bg-secondary)
  Padding: 24px
  
  Content:
    1. Client logo (centered, mb-24)
    2. Client name (h3, centered, mb-4)
    3. Industry badge (caption, centered, mb-24)
    4. Divider
    5. Config summary:
       - Website (linked)
       - Related services (tags)
       - Default tone
       - Keywords (if set)
    6. "Edit Settings" button (secondary, full width, bottom)

Main content:
  Padding: 32px
  
  Header:
    Title: "Content Library"
    Right: "Generate New" primary button
    Margin-bottom: 24px
  
  Content list:
    Vertical stack, gap 16px
    
    Document card:
      Horizontal layout
      Left: Cover thumbnail (80px × 104px, aspect 8.5:11)
      Middle:
        Title (h4)
        Topic (body-sm, text-secondary)
        Timestamps (caption): "Created Jan 2 • Distributed Jan 3"
      Right:
        Status badge
        "..." menu (View, Download, Distribute, Delete)

Layout: Centered form, max-width 600px

Card:
  Padding: 32px
  
Content:
  1. Heading "Create New Content" (h2, mb-8)
  2. Subtitle "Fill in the details below" (body-sm, text-secondary, mb-32)
  
  Form fields (gap 24px):
    
    Topic (required):
      Label: "What topic should we cover?"
      Input: Text, placeholder "e.g., AI implementation strategies for mid-market companies"
    
    Industry:
      Label: "Target Industry"
      Input: Text (NOT dropdown), placeholder "Enter your industry"
    
    Related Services:
      Label: "Related Services"
      Input: Tag input, placeholder "Add services this content should promote"
      Helper: "Press Enter to add"
    
    Keywords (optional):
      Label: "Target Keywords"
      Input: Tag input, placeholder "Add keywords (optional)"
      Helper: "AI will research additional keywords automatically"
    
    Custom Direction (optional):
      Label: "What's your idea? Tell me what you want to talk about"
      Input: Textarea, placeholder "Provide any specific direction, angles, or points to cover..."
      Helper: "Leave blank to let AI determine the best approach"
    
    Tone:
      Label: "Content Tone"
      Input: 3-option selector (cards, not dropdown)
        - Professional (icon: briefcase)
        - Casual Blog (icon: message-circle)
        - Authoritative (icon: award)
      Default: Professional
    
    Anything Else (optional):
      Label: "Anything else we should know?"
      Input: Textarea, smaller
    
    Template (if applicable):
      Label: "Design Template"
      Input: Horizontal scrolling cards with template previews
      Shows: Template name, thumbnail
    
  Submit:
    Primary button "Generate Content" (full width)
    Helper text: "Generation typically takes 2-3 minutes"

Layout: Centered, max-width 500px

Content:
  1. Heading "Creating Your Content" (h2, centered, mb-8)
  2. Topic display (body, text-secondary, centered, in quotes, mb-32)
  
  Progress section:
    Progress bar (full width, mb-24)
    Progress text: "45% complete" (caption, right-aligned, mb-24)
    
    Steps list:
      Vertical, each step 48px height
      10 steps as defined in PRD
      Current step: Expanded with detail text
      Completed steps: Collapsed, checkmark
      Pending steps: Collapsed, grayed out
  
  Footer:
    "Estimated time remaining: ~90 seconds" (caption, centered, mt-32)

Layout: Two-column (preview + actions)

Left column (60%):
  PDF Preview:
    Aspect ratio container (8.5:11)
    Background: White
    Shadow: Medium
    Border-radius: 4px
    
    Preview controls (below):
      Page navigation: "< Page 1 of 7 >"
      Zoom controls: +/-
  
Right column (40%):
  Card stack (gap 16px):
    
    Summary card:
      Title: "Content Summary"
      Content:
        - Document title
        - Section list (bulleted)
        - Stats: Pages, Read time
    
    Statistics card:
      Title: "Key Statistics Included"
      Content: Checklist of stats found
    
    Actions:
      Primary button: "Distribute" (with share icon)
      Secondary button: "Edit Content" (with edit icon)
      Ghost button: "Download PDF" (with download icon)
      Ghost button: "Regenerate" (with refresh icon)
    
    Quick Distribute card:
      Title: "Quick Distribute"
      Content: Platform toggle buttons
        - LinkedIn (toggle)
        - Facebook (toggle)
        - Twitter (toggle)
        - Google Business (toggle)
      All default to ON if OAuth configured

Layout: Sidebar navigation + main content

Sidebar (200px):
  Navigation links:
    - Branding (active)
    - Team Members
    - API Keys
    - Templates
    - Billing

Main content:
  Max-width: 720px
  Padding: 32px
  
  Branding section:
    h2: "Branding"
    
    Sub-sections:
    
    1. Logos
       - Horizontal logo upload (drag-drop or click)
       - Vertical logo upload
       - Round logo upload
       Preview of each with delete option
    
    2. Colors
       - Color mode toggle: Light / Dark
       - Accent color 1 picker + hex input
       - Accent color 2 picker + hex input
       - Accent color 3 picker + hex input
       Live preview panel showing sample UI elements
    
    3. Company Info
       - Company name input
       - Website URL input
       - Footer text textarea
       
    4. Social Accounts
       - LinkedIn page URL
       - Facebook page URL
       - Twitter handle
       - Google Business URL
    
    Save button (primary, sticky footer)

Size: US Letter (8.5" × 11" / 612pt × 792pt)
Margins: 0 (full bleed design)
Safe area: 0.5" from edges for critical content

Client accent-1 → Primary headers, cover overlay, footer
Client accent-2 → Secondary highlights, callout accents
Client accent-3 → Subheadings, links, chart colors

Headings: Playfair Display
  - Document title: 42pt
  - Section title: 26pt
  - Subsection: 14pt
  
Body: Source Sans Pro
  - Body text: 11pt
  - Captions: 9pt
  - Footer: 9pt
  
Statistics: Playfair Display
  - Large numbers: 36pt
  - Labels: 9pt

--mobile: 0 - 639px
--tablet: 640px - 1023px
--desktop: 1024px+

:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 2px;
}