Customization Matrix {#ctp-appendix-cust-matrix}
================================================

Top-Level Appearance
--------------------

| Field Name | Data Type     | Description                             |
|:-----------|:--------------|:----------------------------------------|
| appearance | Object        | Control checkout UI appearance          |
| theme      | Enum (String) | Theme selection (LIGHT, DARK, seasonal) |
| buttonType | Enum (String) | Button label/type                       |
| variables  | Object        | UI customisation variables container    |
[Top-Level Appearance]

Base
----

| Field Name      | Data Type  | Description            |
|:----------------|:-----------|:-----------------------|
| backgroundColor | Hex Colour | Main background colour |
| textColor       | Hex Colour | Main text colour       |
[Base]

Header
------

| Field Name                  | Data Type  | Description              |
|:----------------------------|:-----------|:-------------------------|
| headerBackground            | Hex Colour | Header background colour |
| headerForeground            | Hex Colour | Header text/icon colour  |
| headerAvatarBackgroundColor | Hex Colour | Header avatar background |
| headerAvatarForegroundColor | Hex Colour | Header avatar foreground |
[Header]

Input Default
-------------

| Field Name            | Data Type  | Description             |
|:----------------------|:-----------|:------------------------|
| inputBackground       | Hex Colour | Input background        |
| inputColor            | Hex Colour | Input text colour       |
| inputPlaceholderColor | Hex Colour | Placeholder text colour |
| inputBorderColor      | Hex Colour | Border colour           |
| inputBorderStyle      | String     | Border style            |
| inputBorderRadius     | CSS Size   | Border radius           |
[Input Default]

Input Hover State
-----------------

| Field Name                 | Data Type  | Description                   |
|:---------------------------|:-----------|:------------------------------|
| inputHoverBackground       | Hex Colour | Background when hover         |
| inputHoverColor            | Hex Colour | Text colour when hover        |
| inputHoverPlaceholderColor | Hex Colour | Placeholder colour when hover |
| inputHoverBorderColor      | Hex Colour | Border colour when hover      |
| inputHoverBorderStyle      | String     | Border style when hover       |
[Input Hover State]

Input Focused State
-------------------

| Field Name                   | Data Type  | Description                     |
|:-----------------------------|:-----------|:--------------------------------|
| inputFocusedBackground       | Hex Colour | Background when focused         |
| inputFocusedColor            | Hex Colour | Text colour when focused        |
| inputFocusedPlaceholderColor | Hex Colour | Placeholder colour when focused |
| inputFocusedBorderColor      | Hex Colour | Border colour when focused      |
| inputFocusedBorderStyle      | String     | Border style when focused       |
[Input Focused State]

Input Active State
------------------

| Field Name                  | Data Type  | Description                    |
|:----------------------------|:-----------|:-------------------------------|
| inputActiveBackground       | Hex Colour | Background when active         |
| inputActiveColor            | Hex Colour | Text colour when active        |
| inputActivePlaceholderColor | Hex Colour | Placeholder colour when active |
| inputActiveBorderColor      | Hex Colour | Border colour when active      |
| inputActiveBorderStyle      | String     | Border style when active       |
[Input Active State]

Input Pressed State
-------------------

| Field Name                   | Data Type  | Description                     |
|:-----------------------------|:-----------|:--------------------------------|
| inputPressedBackground       | Hex Colour | Background when pressed         |
| inputPressedColor            | Hex Colour | Text colour when pressed        |
| inputPressedPlaceholderColor | Hex Colour | Placeholder colour when pressed |
| inputPressedBorderColor      | Hex Colour | Border colour when pressed      |
| inputPressedBorderStyle      | String     | Border style when pressed       |
[Input Pressed State]

Input Error State
-----------------

| Field Name                 | Data Type  | Description                   |
|:---------------------------|:-----------|:------------------------------|
| inputErrorBackground       | Hex Colour | Background when error         |
| inputErrorColor            | Hex Colour | Text colour when error        |
| inputErrorPlaceholderColor | Hex Colour | Placeholder colour when error |
| inputErrorBorderColor      | Hex Colour | Border colour when error      |
| inputErrorBorderStyle      | String     | Border style when error       |
[Input Error State]

Input Valid State
-----------------

| Field Name                 | Data Type  | Description                   |
|:---------------------------|:-----------|:------------------------------|
| inputValidBackground       | Hex Colour | Background when valid         |
| inputValidColor            | Hex Colour | Text colour when valid        |
| inputValidPlaceholderColor | Hex Colour | Placeholder colour when valid |
| inputValidBorderColor      | Hex Colour | Border colour when valid      |
| inputValidBorderStyle      | String     | Border style when valid       |
[Input Valid State]

Button Default
--------------

| Field Name         | Data Type  | Description             |
|:-------------------|:-----------|:------------------------|
| buttonBackground   | Hex Colour | Button background       |
| buttonForeground   | Hex Colour | Button text/icon colour |
| buttonShape        | String     | Button shape            |
| buttonBorderColor  | Hex Colour | Border colour           |
| buttonBorderStyle  | String     | Border style            |
| buttonBorderRadius | CSS Size   | Border radius           |
[Button Default]

Button Hover State
------------------

| Field Name             | Data Type  | Description              |
|:-----------------------|:-----------|:-------------------------|
| buttonHoverBackground  | Hex Colour | Background when hover    |
| buttonHoverForeground  | Hex Colour | Text colour when hover   |
| buttonHoverBorderColor | Hex Colour | Border colour when hover |
| buttonHoverBorderStyle | String     | Border style when hover  |
[Button Hover State]

Button Focus State
------------------

| Field Name             | Data Type  | Description              |
|:-----------------------|:-----------|:-------------------------|
| buttonFocusBackground  | Hex Colour | Background when focus    |
| buttonFocusForeground  | Hex Colour | Text colour when focus   |
| buttonFocusBorderColor | Hex Colour | Border colour when focus |
[Button Focus State]

Button Active State
-------------------

| Field Name              | Data Type  | Description               |
|:------------------------|:-----------|:--------------------------|
| buttonActiveBackground  | Hex Colour | Background when active    |
| buttonActiveForeground  | Hex Colour | Text colour when active   |
| buttonActiveBorderColor | Hex Colour | Border colour when active |
| buttonActiveBorderStyle | String     | Border style when active  |
[Button Active State]

Button Disabled State
---------------------

| Field Name                | Data Type  | Description                 |
|:--------------------------|:-----------|:----------------------------|
| buttonDisabledBackground  | Hex Colour | Background when disabled    |
| buttonDisabledForeground  | Hex Colour | Text colour when disabled   |
| buttonDisabledBorderColor | Hex Colour | Border colour when disabled |
[Button Disabled State]

Typography \& Other
-------------------

| Field Name                 | Data Type  | Description             |
|:---------------------------|:-----------|:------------------------|
| fontFamily                 | String     | Font family             |
| borderRadius               | CSS Size   | Global border radius    |
| paymentSelectionBackground | Hex Colour | Payment list background |
[Typography \& Other]