| Surfaces |
| Background--wcp-color-bg | #f7f7f8 |
| Surface--wcp-color-surface | #eaecf0 |
| Surface raised--wcp-color-surface-raised | #dce1ea |
| surface sunken--wcp-color-surface-sunken | #f9fafa |
| overlay--wcp-color-overlay | rgba(247,247,248,0.75) |
| Borders |
| Border--wcp-color-border | #7387b0 |
| border strong--wcp-color-border-strong | rgba(18,21,27,0.25) |
| Text |
| Text--wcp-color-text | #12151b |
| Text muted--wcp-color-text-muted | #4f5b72 |
| text disabled--wcp-color-text-disabled | rgba(18,21,27,0.38) |
| text inverse--wcp-color-text-inverse | #f7f7f8 |
| link--wcp-color-link | #136db7 |
| Brand |
| Primary--wcp-color-primary | #198ae7 |
| primary dim--wcp-color-primary-dim | rgba(25,138,231,0.12) |
| primary on--wcp-color-primary-on | #000000 |
| Status |
| Success--wcp-color-success | #15803d |
| success on--wcp-color-success-on | #ffffff |
| success surface--wcp-color-success-surface | rgba(21,128,61,0.12) |
| Warning--wcp-color-warning | #b45309 |
| warning surface--wcp-color-warning-surface | rgba(180,83,9,0.12) |
| Danger--wcp-color-danger | #dc2626 |
| danger surface--wcp-color-danger-surface | rgba(220,38,38,0.12) |
| Info--wcp-color-info | #1d4ed8 |
| info surface--wcp-color-info-surface | rgba(29,78,216,0.12) |
| Typography |
| font family--wcp-font-family | -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif |
| font mono--wcp-font-mono | ui-monospace,'SF Mono','Fira Code',monospace |
| font size xs--wcp-font-size-xs | 0.70rem |
| font size sm--wcp-font-size-sm | 0.80rem |
| font size md--wcp-font-size-md | 0.875rem |
| font size lg--wcp-font-size-lg | 1rem |
| font size xl--wcp-font-size-xl | 1.125rem |
| font size 2xl--wcp-font-size-2xl | 1.375rem |
| font size 3xl--wcp-font-size-3xl | 1.75rem |
| font weight normal--wcp-font-weight-normal | 400 |
| font weight medium--wcp-font-weight-medium | 500 |
| font weight semibold--wcp-font-weight-semibold | 600 |
| font weight bold--wcp-font-weight-bold | 700 |
| line height tight--wcp-line-height-tight | 1.2 |
| line height normal--wcp-line-height-normal | 1.5 |
| line height relaxed--wcp-line-height-relaxed | 1.75 |
| Spacing |
| space 1--wcp-space-1 | 4px |
| space 2--wcp-space-2 | 8px |
| space 3--wcp-space-3 | 12px |
| space 4--wcp-space-4 | 16px |
| space 5--wcp-space-5 | 24px |
| space 6--wcp-space-6 | 32px |
| space 7--wcp-space-7 | 48px |
| space 8--wcp-space-8 | 64px |
| Shape |
| radius sm--wcp-radius-sm | 4px |
| Radius--wcp-radius-md | 6px |
| radius lg--wcp-radius-lg | 12px |
| radius xl--wcp-radius-xl | 16px |
| radius round--wcp-radius-round | 9999px |
| Shadow |
| Shadow--wcp-shadow-sm | 0 1px 4px rgba(0,0,0,.08) |
| shadow md--wcp-shadow-md | 0 2px 8px rgba(0,0,0,.10) |
| shadow lg--wcp-shadow-lg | 0 4px 16px rgba(0,0,0,.12) |
| shadow xl--wcp-shadow-xl | 0 8px 32px rgba(0,0,0,.15) |
| Motion |
| duration fast--wcp-duration-fast | 100ms |
| duration normal--wcp-duration-normal | 200ms |
| duration slow--wcp-duration-slow | 350ms |
| easing standard--wcp-easing-standard | ease |
| easing out--wcp-easing-out | ease-out |
| easing in--wcp-easing-in | ease-in |
| easing spring--wcp-easing-spring | cubic-bezier(0.34,1.56,0.64,1) |
| Z-index |
| z base--wcp-z-base | 0 |
| z raised--wcp-z-raised | 10 |
| z dropdown--wcp-z-dropdown | 1000 |
| z sticky--wcp-z-sticky | 1100 |
| z modal--wcp-z-modal | 1200 |
| z toast--wcp-z-toast | 1300 |
| z tooltip--wcp-z-tooltip | 1400 |
| Focus & Touch |
| focus ring width--wcp-focus-ring-width | 2px |
| focus ring offset--wcp-focus-ring-offset | 2px |
| focus ring color--wcp-focus-ring-color | #198ae7 |
| touch target min--wcp-touch-target-min | 44px |
| Widget |
| widget bg--wcp-widget-bg | #eaecf0 |
| widget border--wcp-widget-border | #7387b0 |
| widget radius--wcp-widget-radius | 6px |
| widget padding--wcp-widget-padding | 16px |
| widget gap--wcp-widget-gap | 12px |
| widget shadow--wcp-widget-shadow | 0 1px 4px rgba(0,0,0,.08) |