Template System

Template Colors:
  Primary: #3B82F6 (Blue)
  Secondary: #8B5CF6 (Purple)
  Accent: #10B981 (Green)
  Text: #1F2937 (Dark Gray)
  Background: #FFFFFF (White)

Heading Sizes:
  H1:
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 700
  H2:
    fontSize: 28px
    lineHeight: 1.3
    fontWeight: 600
  H3:
    fontSize: 22px
    lineHeight: 1.4
    fontWeight: 600
  H4:
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 600
  H5:
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 500
  H6:
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 500

Margins:
  Page:
    Top: 60px
    Right: 80px
    Bottom: 60px
    Left: 80px

  Blocks:
    Above: 24px
    Below: 24px

Padding:
  Callouts: 16px
  Tables: 12px
  Signatures: 20px

Border Options:
  Position: Top | Bottom | Both
  Style: Solid | Dashed | Dotted | Double
  Width: 1-5px
  Color: Any hex color

Page Break Options:
  - Avoid breaks inside blocks
  - Force break after block
  - Keep heading with following content
  - Orphan/widow control

/* Example custom CSS */
.heading-1 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.callout-info {
  border-left: 4px solid #3B82F6;
  border-radius: 8px;
}

.table th {
  background: linear-gradient(to bottom, #3B82F6, #2563EB);
}

// Example: Add current date to footer
vibedoc.onRender((doc) => {
  doc.footer.text = `© ${new Date().getFullYear()} Your Company`;
});

// Future API
await vibedoc.updateTemplate(documentId, {
  colors: {
    primary: '#3B82F6',
    secondary: '#8B5CF6'
  },
  fonts: {
    heading: 'Inter',
    body: 'Inter'
  },
  spacing: {
    marginTop: 80,
    marginBottom: 80
  }
});