.wpcz {

    /* --- General --- */
    --wpcz-radius: 4px;
    --wpcz-radius-full: 999px;

    --wpcz-selection-bg-color: hsl(226, 80%, 46%);
    --wpcz-selection-text-color: #fff;
    --wpcz-content-bg-color: #fff;
    --wpcz-brand-title-color: hsl(232, 52%, 5%);
    --wpcz-title-color: hsl(232, 52%, 5%);
    --wpcz-legend-color: hsl(232, 52%, 5%);
    --wpcz-legend-border-color: hsl(232, 5%, 92%);
    --wpcz-label-color: hsl(232, 52%, 5%);
    --wpcz-response-message-text-color: hsl(232, 2%, 50%);
    --wpcz-placeholder-text-color: hsl(232, 2%, 50%);
    --wpcz-text-color: hsl(232, 52%, 5%);
    --wpcz-link-color: hsl(232, 100%, 50%);
    --wpcz-link-color-hover-and-focus: hsl(232, 100%, 50%);
    --wpcz-link-color-active: hsl(232, 100%, 50%);
    --wpcz-track-bg-color: hsl(232, 5%, 90%);
    --wpcz-thumb-bg-color: hsl(232, 5%, 50%);
    --wpcz-thumb-bg-color-hover: hsl(232, 5%, 46%);
    --wpcz-thumb-bg-color-active: hsl(232, 5%, 40%);

    /* --- Nav --- */
    --wpcz-nav-bg-color: hsl(232, 5%, 90%);
    --wpcz-nav-link-color: hsl(232, 2%, 5%);
    --wpcz-nav-link-color-hover-and-focus: hsl(232, 2%, 10%);
    --wpcz-nav-link-color-active: hsl(232, 2%, 10%);
    --wpcz-nav-link-border-color: hsla(232, 2%, 90%, 0);
    --wpcz-nav-link-border-color-hover-and-focus: hsla(232, 2%, 65%, 1);
    --wpcz-nav-link-border-color-active: hsla(232, 2%, 10%, 1);
    --wpcz-nav-link-border-color-active-and-focus: hsla(232, 2%, 10%, 1);
    --wpcz-nav-link-bg-color: hsl(232, 5%, 90%);
    --wpcz-nav-link-bg-color-hover-and-focus: hsl(232, 5%, 80%);
    --wpcz-nav-link-bg-color-active: #fff;

    /* --- Loader --- */
    --wpcz-loader-bg-color: rgba(255, 255, 255, 0.5);
    --wpcz-loader-fill-color: hsl(232, 76%, 30%);

    /* --- Form --- */
    --wpcz-form-box-bg-color: #fff;
    --wpcz-form-control-color: hsl(232, 2%, 5%);
    --wpcz-form-control-bg-color: #fff;
    --wpcz-form-control-bg-color-focus: #fff;
    --wpcz-form-control-border-color: hsl(232, 2%, 50%);
    --wpcz-form-control-bg-color-disabled: hsl(232, 2%, 90%);
    --wpcz-form-control-color-disabled: hsl(232, 2%, 50%);
    --wpcz-form-control-border-color-disabled: hsl(232, 2%, 85%);
    --wpcz-form-control-bg-color-readonly: hsl(232, 2%, 90%);
    --wpcz-form-control-color-readonly: hsl(232, 52%, 5%);
    --wpcz-form-control-border-color-readonly: hsl(232, 2%, 85%);
    --wpcz-form-control-integer-input-sep-bg-color: hsl(232, 2%, 70%);

    /* --- Buttons --- */
    /* Common */
    --wpcz-btn-outline-focus-inner-color: #fff;

    /* Default */
    --wpcz-default-color: hsl(232, 5%, 84%);
    --wpcz-default-border-color: hsl(232, 5%, 84%);
    --wpcz-default-bg-color: hsl(232, 5%, 84%);
    --wpcz-default-bg-color-hover-and-focus: hsl(232, 5%, 80%);
    --wpcz-default-bg-color-active: hsl(232, 5%, 77%);
    --wpcz-default-text-color: hsl(232, 5%, 5%);
    --wpcz-default-text-color-hover-and-focus: hsl(232, 5%, 5%);
    --wpcz-default-text-color-active: hsl(232, 5%, 0%);
    --wpcz-default-focus-outline-color: hsl(232, 5%, 90%);
    --wpcz-default-focus-outline-light-color: #fff;

    /* Primary */
    --wpcz-primary-color: hsl(232, 76%, 30%);
    --wpcz-primary-border-color: hsl(232, 60%, 40%);
    --wpcz-primary-bg-color: hsl(232, 76%, 30%);
    --wpcz-primary-bg-color-hover-and-focus: hsl(232, 76%, 33%);
    --wpcz-primary-bg-color-active: hsl(232, 76%, 27%);
    --wpcz-primary-text-color: rgba(255, 255, 255, 0.875);
    --wpcz-primary-text-color-hover-and-focus: rgba(255, 255, 255, 0.9);
    --wpcz-primary-text-color-active: rgba(255, 255, 255, 0.9);

    /* Secondary */
    --wpcz-secondary-color: hsl(254, 52%, 50%);
    --wpcz-secondary-border-color: hsl(254, 52%, 50%);
    --wpcz-secondary-bg-color: hsl(254, 52%, 50%);
    --wpcz-secondary-bg-color-hover-and-focus: hsl(254, 52%, 52%);
    --wpcz-secondary-bg-color-active: hsl(254, 52%, 48%);
    --wpcz-secondary-text-color: rgba(255, 255, 255, 0.9);
    --wpcz-secondary-text-color-hover-and-focus: rgba(255, 255, 255, 0.9);
    --wpcz-secondary-text-color-active: rgba(255, 255, 255, 0.95);

    /* Midtone */
    --wpcz-midtone-color: hsl(200, 18%, 46%);
    --wpcz-midtone-border-color: hsl(200, 18%, 46%);
    --wpcz-midtone-bg-color: hsl(200, 18%, 46%);
    --wpcz-midtone-bg-color-hover-and-focus: hsl(200, 18%, 48%);
    --wpcz-midtone-bg-color-active: hsl(200, 18%, 44%);
    --wpcz-midtone-text-color: rgba(255, 255, 255, 0.95);
    --wpcz-midtone-text-color-hover-and-focus: rgba(255, 255, 255, 0.95);
    --wpcz-midtone-text-color-active: rgba(255, 255, 255, 1);

    /* Dark */
    --wpcz-dark-color: hsl(232, 22%, 18%);
    --wpcz-dark-border-color: hsl(232, 22%, 18%);
    --wpcz-dark-bg-color: hsl(232, 22%, 18%);
    --wpcz-dark-bg-color-hover-and-focus: hsl(232, 22%, 20%);
    --wpcz-dark-bg-color-active: hsl(232, 22%, 15%);
    --wpcz-dark-text-color: rgba(255, 255, 255, 0.95);
    --wpcz-dark-text-color-hover-and-focus: rgba(255, 255, 255, 0.95);
    --wpcz-dark-text-color-active: rgba(255, 255, 255, 1);

    /* Information */
    --wpcz-information-color: hsl(226, 80%, 46%);
    --wpcz-information-border-color: hsl(226, 80%, 46%);
    --wpcz-information-bg-color: hsl(226, 80%, 46%);
    --wpcz-information-bg-color-hover-and-focus: hsl(226, 80%, 48%);
    --wpcz-information-bg-color-active: hsl(226, 82%, 44%);
    --wpcz-information-text-color: rgba(255, 255, 255, 0.9);
    --wpcz-information-text-color-hover-and-focus: rgba(255, 255, 255, 0.9);
    --wpcz-information-text-color-active: rgba(255, 255, 255, 0.95);

    /* Warning */
    --wpcz-warning-color: hsl(47, 100%, 52%);
    --wpcz-warning-border-color: hsl(47, 100%, 52%);
    --wpcz-warning-bg-color: hsl(47, 100%, 52%);
    --wpcz-warning-bg-color-hover-and-focus: hsl(47, 100%, 56%);
    --wpcz-warning-bg-color-active: hsl(47, 100%, 48%);
    --wpcz-warning-text-color: rgba(0, 0, 0, 0.975);
    --wpcz-warning-text-color-hover-and-focus: rgba(0, 0, 0, 0.975);
    --wpcz-warning-text-color-active: rgba(0, 0, 0, 1);

    /* Success */
    --wpcz-success-color: hsl(150, 100%, 32%);
    --wpcz-success-border-color: hsl(150, 100%, 32%);
    --wpcz-success-bg-color: hsl(150, 100%, 32%);
    --wpcz-success-bg-color-hover-and-focus: hsl(150, 100%, 33.5%);
    --wpcz-success-bg-color-active: hsl(150, 100%, 30%);
    --wpcz-success-text-color: #fff;
    --wpcz-success-text-color-hover-and-focus: #fff;
    --wpcz-success-text-color-active: #fff;

    /* Error */
    --wpcz-error-color: hsl(349, 74%, 48%);
    --wpcz-error-border-color: hsl(349, 74%, 48%);
    --wpcz-error-bg-color: hsl(349, 74%, 48%);
    --wpcz-error-bg-color-hover-and-focus: hsl(349, 74%, 51%);
    --wpcz-error-bg-color-active: hsl(349, 74%, 46%);
    --wpcz-error-text-color: #fff;
    --wpcz-error-text-color-hover-and-focus: #fff;
    --wpcz-error-text-color-active: #fff;
    --wpcz-error-focus-outline-color: hsl(349, 74%, 80%);

    /* --- Checkable --- */
    --wpcz-checkable-bg-color: hsl(232, 3%, 52%);
    --wpcz-checkable-border-color: hsl(232, 3%, 52%);
    --wpcz-checkable-color: hsl(232, 3%, 52%);
    --wpcz-checkable-color-focus-outline: hsl(232, 10%, 52%);
    --wpcz-checkable-color-checked: hsl(150, 100%, 32%);
    --wpcz-checkable-color-checked-focus-outline: hsl(150, 100%, 32%);
    --wpcz-checkable-icon-color: #fff;
    --wpcz-checkable-icon-color-inactive: rgba(255, 255, 255, 0.95);
    --wpcz-checkable-toggle-switch-color: #fff;
    --wpcz-checkable-outline-focus-inner-color: #fff;

    /* --- Tag Input --- */
    --wpcz-tag-border-color: hsl(232, 5%, 84%);
    --wpcz-tag-bg-color: hsl(232, 5%, 84%);
    --wpcz-tag-text-color: hsl(232, 5%, 10%);
    --wpcz-tag-num-bg-color: hsl(232, 5%, 92%);
    --wpcz-tag-num-text-color: hsl(232, 5%, 10%);

    /* --- Dropdown --- */
    --wpcz-dropdown-border-color: hsl(232, 5%, 90%);
    --wpcz-dropdown-bg-color: #fff;
    --wpcz-dropdown-bg-color-hover: hsl(232, 5%, 90%);
    --wpcz-dropdown-bg-color-selected: hsl(232, 5%, 84%);
    --wpcz-dropdown-text-color: hsl(232, 5%, 10%);

    /* --- Datalist --- */
    --wpcz-datalist-border-color: hsl(232, 5%, 90%);
    --wpcz-datalist-bg-color: #fff;
    --wpcz-datalist-bg-color-hover: hsl(232, 5%, 90%);
    --wpcz-datalist-bg-color-selected: hsl(232, 5%, 84%);
    --wpcz-datalist-text-color: hsl(232, 5%, 10%);

    /* --- Datetime Picker --- */
    --wpcz-datetimepicker-icon-color: hsl(232, 22%, 23%);
    --wpcz-datetimepicker-header-bg-color: hsl(232, 5%, 90%);
    --wpcz-datetimepicker-border-color: hsl(232, 5%, 90%);
    --wpcz-datetimepicker-content-bg-color: #fff;
    --wpcz-datetimepicker-day-btn-bg-color: #fff;
    --wpcz-datetimepicker-day-btn-bg-color-hover-and-focus: rgba(0, 0, 0, 0.075);
    --wpcz-datetimepicker-day-btn-color: hsl(232, 52%, 5%);
    --wpcz-datetimepicker-day-btn-color-hover-and-focus: hsl(232, 52%, 5%);
    --wpcz-datetimepicker-day-btn-color-sunday: hsl(349, 74%, 48%);
    --wpcz-datetimepicker-day-btn-color-another-month: hsl(232, 22%, 85%);
    --wpcz-datetimepicker-day-btn-color-another-month-hover-and-focus: hsl(232, 22%, 78%);
    --wpcz-datetimepicker-day-btn-selected-bg-color: hsl(226, 80%, 46%);
    --wpcz-datetimepicker-day-btn-selected-color: #fff;
    --wpcz-datetimepicker-day-btn-outline-color: #fff;
    --wpcz-datetimepicker-day-btn-outline-color-selected: #fff;
    --wpcz-datetimepicker-footer-bg-color: hsl(232, 5%, 90%);

    /* Drag & Drop */
    --wpcz-drag-and-drop-border-color: hsl(232, 2%, 50%);
    --wpcz-drag-and-drop-over-bg-color: hsl(232, 5%, 98%);
    --wpcz-drag-and-drop-add-bg-color: hsl(232, 5%, 92%);

    /* --- Image Preview --- */
    --wpcz-image-preview-bg-color: hsl(232, 5%, 92%);
    --wpcz-image-preview-border-color: hsl(232, 2%, 85%);
    --wpcz-image-preview-icon-color: hsl(232, 5%, 84%);

    /* --- Table --- */
    --wpcz-table-border-color: hsl(232, 22%, 90%);
    --wpcz-table-striped-bg-color: hsl(232, 22%, 96%);
    --wpcz-table-filter-separator-border-color: rgba(0, 0, 0, 0.1);

    /* --- Info Box --- */
    --wpcz-info-box-scroll-track-bg-color: hsl(232, 5%, 90%);
    --wpcz-info-box-scroll-thumb-bg-color: hsl(232, 5%, 32%);
    --wpcz-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(232, 5%, 30%);
    --wpcz-info-box-scroll-thumb-bg-color-active: hsl(232, 5%, 26%);
    --wpcz-info-box-border-color: hsl(232, 5%, 73%);

    --wpcz-primary-info-box-scroll-track-bg-color: hsl(232, 100%, 6%);
    --wpcz-primary-info-box-scroll-thumb-bg-color: hsl(232, 76%, 96%);
    --wpcz-primary-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(232, 76%, 98%);
    --wpcz-primary-info-box-scroll-thumb-bg-color-active: hsl(232, 76%, 100%);
    --wpcz-primary-info-box-border-color: hsl(232, 60%, 36%);

    --wpcz-secondary-info-box-scroll-track-bg-color: hsl(254, 60%, 22%);
    --wpcz-secondary-info-box-scroll-thumb-bg-color: hsl(254, 2%, 96%);
    --wpcz-secondary-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(254, 2%, 98%);
    --wpcz-secondary-info-box-scroll-thumb-bg-color-active: hsl(254, 2%, 100%);
    --wpcz-secondary-info-box-border-color: hsl(254, 54%, 54%);

    --wpcz-midtone-info-box-scroll-track-bg-color: hsl(200, 18%, 30%);
    --wpcz-midtone-info-box-scroll-thumb-bg-color: hsl(200, 2%, 96%);
    --wpcz-midtone-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(200, 2%, 98%);
    --wpcz-midtone-info-box-scroll-thumb-bg-color-active: hsl(200, 2%, 100%);
    --wpcz-midtone-info-box-border-color: hsl(200, 12%, 52%);

    --wpcz-dark-info-box-scroll-track-bg-color: hsl(232, 22%, 6%);
    --wpcz-dark-info-box-scroll-thumb-bg-color: hsl(232, 2%, 96%);
    --wpcz-dark-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(232, 2%, 98%);
    --wpcz-dark-info-box-scroll-thumb-bg-color-active: hsl(232, 2%, 100%);
    --wpcz-dark-info-box-border-color: hsl(232, 22%, 26%);

    --wpcz-information-info-box-scroll-track-bg-color: hsl(226, 96%, 22%);
    --wpcz-information-info-box-scroll-thumb-bg-color: hsl(226, 2%, 96%);
    --wpcz-information-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(226, 2%, 98%);
    --wpcz-information-info-box-scroll-thumb-bg-color-active: hsl(226, 2%, 100%);
    --wpcz-information-info-box-border-color: hsl(226, 100%, 56%);

    --wpcz-warning-info-box-scroll-track-bg-color: hsl(48, 100%, 86%);
    --wpcz-warning-info-box-scroll-thumb-bg-color: hsl(48, 100%, 7%);
    --wpcz-warning-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(48, 100%, 5%);
    --wpcz-warning-info-box-scroll-thumb-bg-color-active: hsl(48, 100%, 1%);
    --wpcz-warning-info-box-border-color: hsl(48, 100%, 46%);

    --wpcz-success-info-box-scroll-track-bg-color: hsl(150, 100%, 16%);
    --wpcz-success-info-box-scroll-thumb-bg-color: hsl(150, 100%, 96%);
    --wpcz-success-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(150, 100%, 98%);
    --wpcz-success-info-box-scroll-thumb-bg-color-active: hsl(150, 100%, 100%);
    --wpcz-success-info-box-border-color: hsl(150, 100%, 38%);

    --wpcz-error-info-box-scroll-track-bg-color: hsl(349, 100%, 22%);
    --wpcz-error-info-box-scroll-thumb-bg-color: hsl(349, 100%, 96%);
    --wpcz-error-info-box-scroll-thumb-bg-color-hover-and-focus: hsl(349, 100%, 98%);
    --wpcz-error-info-box-scroll-thumb-bg-color-active: hsl(349, 100%, 100%);
    --wpcz-error-info-box-border-color: hsl(349, 100%, 64%);

    /* --- Pagination --- */
    --wpcz-pagination-bg-color: hsl(232, 22%, 18%);
    --wpcz-pagination-bg-color-hover-and-focus: hsl(232, 22%, 20%);
    --wpcz-pagination-bg-color-active: hsl(232, 22%, 15%);
    --wpcz-pagination-bg-color-disabled: hsl(232, 5%, 65%);
    --wpcz-pagination-text-color: #fff;
    --wpcz-pagination-text-color-hover-and-focus: #fff;
    --wpcz-pagination-text-color-active: #fff;

    /* --- Breadcrumb --- */
    --wpcz-breadcrumb-default-color: hsl(232, 100%, 50%);
    --wpcz-breadcrumb-active-color: hsl(232, 52%, 5%);
    --wpcz-breadcrumb-link-outline-focus-inner: #fff;
    --wpcz-breadcrumb-sep: '/';

    /* --- Modal --- */
    --wpcz-modal-bg-color-overlay: rgba(0, 0, 0, 0.8);
    --wpcz-modal-bg-color: #fff;
    --wpcz-modal-close-icon-color: hsl(232, 2%, 5%);
    --wpcz-modal-close-icon-color-hover-and-focus: hsl(232, 2%, 4%);
    --wpcz-modal-close-icon-color-active: hsl(232, 2%, 2%);

    /* Syntax Highlight */
    --wpcz-cm-bg-color: hsl(232, 5%, 99%);
    --wpcz-cm-text-color: hsl(232, 52%, 5%);
    --wpcz-cm-line-bg-color: rgba(0, 0, 0, 0.1);
    --wpcz-cm-gutter-bg-color: hsl(232, 5%, 90%);
    --wpcz-cm-gutter-border-color: hsl(232, 5%, 80%);
    --wpcz-cm-line-number-text-color: hsl(232, 5%, 60%);
    --wpcz-cm-matching-bracket-bg-color: hsl(47, 100%, 52%);
    --wpcz-cm-matching-bracket-text-color: rgba(0, 0, 0, 0.975);
    --wpcz-cm-bracket-text-color: hsl(232, 22%, 18%);
    --wpcz-cm-comment-text-color: rgba(0, 0, 0, 0.5);
    --wpcz-cm-meta-text-color: hsl(254, 52%, 50%);
    --wpcz-cm-keyword-text-color: hsl(349, 74%, 48%);
    --wpcz-cm-error-text-color: hsl(349, 74%, 48%);
    --wpcz-cm-atom-text-color: hsl(150, 100%, 32%);
    --wpcz-cm-number-text-color: hsl(150, 100%, 32%);
    --wpcz-cm-attribute-text-color: hsl(150, 100%, 32%);
    --wpcz-cm-string-text-color: hsl(200, 18%, 46%);
    --wpcz-cm-string-2-text-color: hsl(200, 18%, 46%);
    --wpcz-cm-tag-text-color: hsl(226, 80%, 46%);
    --wpcz-cm-variable-text-color: hsl(254, 52%, 50%);
    --wpcz-cm-variable-2-text-color: hsl(226, 80%, 46%);
    --wpcz-cm-variable-3-text-color: hsl(232, 76%, 30%);
    --wpcz-cm-def-text-color: hsl(232, 76%, 30%);
    --wpcz-cm-builtin-text-color: hsl(254, 52%, 50%);
    --wpcz-cm-special-text-color: hsl(254, 52%, 50%);
    --wpcz-cm-link-text-color: hsl(226, 80%, 46%);
    --wpcz-cm-operator-text-color: rgba(0, 0, 0, 0.9);
    --wpcz-cm-meta-text-color: rgba(0, 0, 0, 0.5);
    --wpcz-cm-qualifier-text-color: hsl(254, 52%, 50%);
    --wpcz-cm-property-text-color: hsl(300, 70%, 38%);

    /* Tooltip */
    --wpcz-tooltip-bg-color: #eee;
    --wpcz-tooltip-color: hsl(232, 52%, 5%);
}