shopify_update_checkout_branding

  🔒 SAFETY: Defaults to TEST/draft profile unless useProductionProfile:true or explicit profileId provided.
  
  🎨 PRIMARY BUTTON COLOR:
  The primary button (Pay Now) color is controlled by:
  • globalBrand: Sets the brand color (EASIEST - just pass hex color)
  • OR designSystem.colors.global.brand: Same as above but in full structure
  • OR designSystem.colors.schemes.scheme1.primaryButton: For detailed control including hover states
  • NOT colors.primary - this field is deprecated, use globalBrand instead
  
  📚 COMPREHENSIVE CAPABILITIES:
  
  DESIGN SYSTEM (Foundation):
  • GLOBAL COLORS:
    - brand: Primary buttons and brand elements (#FF6B00 for orange)
    - accent: Links and focus states
    - success, warning, critical, info: Semantic colors
    - decorative: Highlight colors
  • COLOR SCHEMES (scheme1-4): Each can have:
    - base: Background, text, border, icon, accent colors
    - primaryButton: Background, text, hover state colors
    - secondaryButton: Secondary action button colors
    - control: Form field colors with selected state
  • TYPOGRAPHY:
    - primary/secondary fonts (e.g., "Assistant", "Roboto", "Montserrat")
    - Font weights, sizes, letter spacing
    - Size base (12-18px) and ratio (1.0-1.5)
  • CORNER RADIUS: Variables for small, base, large radii
  
  CUSTOMIZATIONS (Specific Elements):
  • HEADER:
    - Logo: position, width (50-500px), visibility (VISIBLE/HIDDEN)
    - Banner: background image via mediaImageId
    - CartLink: contentType (ICON/IMAGE/TEXT), custom image
    - Alignment, divided (true/false), padding, color scheme
    - Position mapping: LEFT→START, CENTER→INLINE, RIGHT→INLINE_SECONDARY
  • FOOTER: 
    - Content visibility, color scheme
    - padding: NONE|BASE|BASE_500|SMALL|SMALL_100-500|LARGE|LARGE_100-500 (section values)
  • MAIN AREA:
    - Section: 
      * background: BASE|SUBDUED|TRANSPARENT (accepts SOLID→BASE, NONE→TRANSPARENT)
      * shadow: SMALL_100|SMALL_200|BASE|LARGE_100|LARGE_200 (NO 'NONE' or 'BASE_200'!)
      * cornerRadius: NONE|SMALL|BASE|LARGE
      * padding: NONE|BASE|BASE_500|SMALL|SMALL_100-500|LARGE|LARGE_100-500 (NOT button values!)
      * border: NONE|FULL
      * borderWidth: BASE|LARGE|LARGE_100|LARGE_200 (NOT 'NONE' or 'MEDIUM'!)
    - Background image via mediaImageId
    - Divider: borderStyle (BASE/DASHED/DOTTED), borderWidth (BASE|LARGE|LARGE_100|LARGE_200), visibility
    - Color scheme: COLOR_SCHEME1|COLOR_SCHEME2|COLOR_SCHEME3|COLOR_SCHEME4
  • ORDER SUMMARY:
    - Section: Same exact values as main area
    - Background image support
    - Independent divider settings with visibility
    - Separate color scheme
  • CONTENT:
    - Divider: borderStyle, borderWidth, visibility (container divider)
  • GLOBAL DIVIDER:
    - borderStyle (BASE/DASHED/DOTTED), borderWidth (NONE/BASE/MEDIUM)
    - Note: NO visibility on global divider (customizations.divider)
  • BUTTONS:
    - primaryButton/secondaryButton:
      * background: NONE|SOLID
      * border: NONE|FULL
      * cornerRadius: NONE|SMALL|BASE|LARGE
      * blockPadding/inlinePadding: NONE|EXTRA_TIGHT|TIGHT|BASE|LOOSE|EXTRA_LOOSE
      * typography: font, size, weight (BASE|BOLD), kerning, letterCase (NONE|LOWER|TITLE|UPPER)
  • FORM CONTROLS:
    - border: NONE|FULL (exactly these two)
    - color: TRANSPARENT (ONLY this value accepted!)
    - cornerRadius: NONE|SMALL|BASE|LARGE
    - labelPosition: INSIDE|OUTSIDE
  • TEXT FIELDS & SELECTS: Border, typography styling
  • CHECKBOXES: Corner radius
  • HEADINGS: Typography for 3 levels
  • MERCHANDISE THUMBNAILS: Corner radius, border
  • EXPRESS CHECKOUT: Button corner radius
  • OTHER: Choice lists, buyer journey, cart link, dividers, content borders
  
  SIMPLIFIED OPTIONS (for convenience):
  • colors: {background, text, primary→brand, surface} - Legacy support
  • globalBrand: Direct way to set primary button color
  • primaryButtonColor: Override primary button background
  • typography: Simplified font settings
  • logoPosition, logoWidth, imageId: Direct logo control
  
  USAGE EXAMPLES:
  1. Set orange primary button: globalBrand: "#FF6B00"
  2. Full brand colors: designSystem.colors.global.brand: "#FF6B00"
  3. Detailed button control: designSystem.colors.schemes.scheme1.primaryButton.background: "#FF6B00"
  
  API NOTES & CRITICAL ENUM VALUES:
  - SHADOW: ONLY 5 valid values: SMALL_100, SMALL_200, BASE, LARGE_100, LARGE_200
    * NO 'NONE' (use SMALL_100), NO 'BASE_200' (use LARGE_100)
  - BACKGROUND: BASE, SUBDUED, TRANSPARENT (NOT 'SOLID' or 'NONE')
    * Tool maps SOLID→BASE, NONE→TRANSPARENT automatically
  - PADDING: Sections use different values than buttons!
    * Sections: NONE|BASE|BASE_500|SMALL|SMALL_100-500|LARGE|LARGE_100-500
    * Buttons: NONE|EXTRA_TIGHT|TIGHT|BASE|LOOSE|EXTRA_LOOSE
  - BORDERWIDTH: Different for sections vs global divider!
    * Sections/container dividers: BASE|LARGE|LARGE_100|LARGE_200 (NO 'MEDIUM')
    * Global divider: NONE|BASE|MEDIUM
  - DIVIDERS: Global (customizations.divider) has NO visibility field
    * Container dividers (main.divider, orderSummary.divider) DO have visibility
  - letterCase: UPPER not UPPERCASE
  - globalCornerRadius: ONLY accepts NONE (API limitation)
  - control.color: ONLY accepts TRANSPARENT (API limitation)
  - Position: LEFT→START, CENTER→INLINE, RIGHT→INLINE_SECONDARY
  - Changes to TEST profile can be previewed
  - PUBLISHED profile changes are immediately live