:root, ::backdrop {
  /* Main */
  --dh-color-bg-body: var(--hylo-color-bg-body-darkmode);
  --dh-color-text-body: var(--hylo-color-font-body-darkmode);
  --dh-color-text-link: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-link-hover: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-error: var(--hylo-color-error-light-darkmode);
  --dh-color-text-success: var(--hylo-color-success);
  --dh-color-text-muted: var(--hylo-color-gray-darkmode);
  --dh-color-text-muted-hover: var(--hylo-color-gray-lighter-darkmode);
  --dh-color-outline: var(--hylo-color-one-light-darkmode);
  --dh-font-family-body: "SF Pro Display";

  /* Sidebar */
  --dh-color-bg-sidebar: var(--hylo-color-four-darkest-darkmode);
  --dh-color-bg-sidebar-active: var(--hylo-color-one-darker-darkmode);
  --dh-color-bg-sidebar-hover: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-sidebar: var(--hylo-color-font-body-darkmode);
  --dh-color-text-sidebar-active: var(--hylo-color-font-body-darkmode);
  --dh-color-text-sidebar-hover: var(--hylo-color-font-body-darkmode);
  --dh-color-text-sidebar-header: #fff;

  /* Top Navigation */
  --dh-color-bg-top_nav: var(--hylo-color-bg-body-darkmode);
  --dh-color-text-top_nav: var(--hylo-color-font-body-darkmode);

  /* Tabs */
  --dh-color-bg-tab: transparent;
  --dh-color-bg-tab-active: var(--hylo-color-one-darker-darkmode);
  --dh-color-bg-tab-hover: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-tab: var(--hylo-color-font-body-darkmode);
  --dh-color-text-tab-active: var(--hylo-color-font-body-darkmode);
  --dh-color-text-tab-hover: var(--hylo-color-font-body-darkmode);

  /* Horizontal tabs */
  --dh-color-text-horizontal_tab: var(--hylo-color-gray-600);
  --dh-color-text-horizontal_tab-hover: var(--hylo-color-gray-600);
  --dh-color-text-horizontal_tab-active: var(--hylo-color-gray-darkmode);
  --dh-color-border_bottom-horizontal_tab: transparent;
  --dh-color-border_bottom-horizontal_tab-hover: var(--hylo-color-one);
  --dh-color-border_bottom-horizontal_tab-active: var(--hylo-color-font-body-darkmode);
  --dh-color-text-horizontal_tab-icon: var(--hylo-color-gray-400);
  --dh-color-text-horizontal_tab-icon-hover: var(--hylo-color-gray-500);
  --dh-color-text-horizontal_tab-icon-active: var(--hylo-color-one);

  /* Dropdown */
  --dh-color-bg-dropdown: var(--hylo-color-four-darkest-darkmode);
  --dh-color-bg-dropdown-hover: var(--hylo-color-one-darker-darkmode);
  --dh-color-text-dropdown: var(--hylo-color-font-body-darkmode);
  --dh-color-text-dropdown-hover: var(--hylo-color-font-body-darkmode);
  --dh-color-border-dropdown: var(--hylo-color-one-darker-darkmode);

  /* Fieldset */
  --dh-color-bg-fieldset: var(--hylo-color-four-darkest-darkmode);
  --dh-color-border-fieldset: var(--hylo-color-one-darker-darkmode);
  --dh-border-radius-fieldset: var(--dh-rounded-xl);
  --dh-color-text-fieldset-heading: var(--dh-color-text-body);
  --dh-font-size-fieldset-heading: var(--dh-font-size-xl);
  --dh-font-weight-fieldset-heading: var(--dh-font-weight-bold);
  --dh-padding-x-fieldset: var(--dh-spacing-6);
  --dh-padding-y-fieldset: var(--dh-spacing-4);

  /* Formset */
  --dh-color-bg-formset: transparent;
  --dh-color-border-formset: transparent;
  --dh-border-radius-formset: var(--dh-rounded);
  --dh-font-size-formset-heading: var(--dh-font-size-lg);
  --dh-font-weight-formset-heading: var(--dh-font-weight-bold);
  --dh-color-text-formset-subheading: var(--hylo-color-gray-darkmode);

  /* Inline */
  --dh-color-bg-inline: var(--hylo-color-three-darkest-darkmode);
  --dh-color-border-inline: var(--hylo-color-three-darkest-darkmode);
  --dh-color-text-inline: var(--hylo-color-three-darkmode);
  --dh-color-text-inline-heading: var(--hylo-color-one-light-darkmode);
  --dh-color-text-inline-heading-open: var(--hylo-color-one-light-darkmode);
  --dh-color-text-inline-subheading: var(--hylo-color-gray-darkmode);
  --dh-font-size-inline-heading: var(--dh-font-size-lg);
  --dh-font-weight-inline-heading: var(--dh-font-weight-bold);
  --dh-border-radius-inline: var(--dh-rounded-md);
  --dh-padding-x-inline: var(--dh-spacing-6);
  --dh-padding-y-inline: var(--dh-spacing-4);

  /* Field */
  --dh-color-bg-field: var(--hylo-color-three-dark-darkmode);
  --dh-color-bg-field-readonly: var(--hylo-color-three-darker-darkmode);
  --dh-color-text-field: var(--hylo-color-gray-light-darkmode);
  --dh-color-text-field-error: var(--hylo-color-error-dark);
  --dh-color-text-field-readonly: var(--hylo-color-gray-light-darkmode);
  --dh-color-border-field: var(--hylo-color-gray-light-darkmode);
  --dh-color-border-field-readonly: transparent;
  --dh-color-border-field-focus: var(--hylo-color-border-default-darkmode);
  --dh-color-border-field-error: var(--hylo-color-error-dark);
  --dh-color-border-field-error-focus: var(--hylo-color-error);
  --dh-color-text-field-placeholder: var(--hylo-color-three-darkmode);
  --dh-color-text-field-placeholder-error: var(--hylo-color-error);
  --dh-color-field-icon: var(----hylo-color-three-dark-darkmode);
  --dh-color-scheme-field: dark;
  --dh-color-text-field-label: var(--hylo-color-three-lightest-darkmode );
  --dh-border-radius-field: var(--dh-rounded-md);
  --dh-line-height-field: 1.25rem; /* used by dh-date-field */
  --dh-line-height-field-label: 1.25rem; /* used by dh-date-field */
  --dh-font-size-field: var(--dh-font-size-sm); /* used by dh-date-field */
  --dh-font-size-field-label: var(--dh-font-size-sm); /* used by dh-date-field */
  --dh-border-width-field: var(--dh-border);
  --dh-border-width-field-focus: var(--dh-border);
  /* --dh-height-field: 2.375rem; */
  /* --dh-spacing-padding_vertical-field: 0.5rem; */
  /* --dh-spacing-padding_horizontal-field: var(--dh-rounded-xl); */

  /* Checkboxes */
  /* --dh-size-checkbox: 1rem; */
  --dh-color-text-checkbox: var(--hylo-color-one-darker-darkmode);
  --dh-border-radius-checkbox: var(--dh-rounded);

  /* Buttons */
  --dh-color-bg-button-primary: var(--hylo-color-one-darker-darkmode);
  --dh-color-bg-button-primary-active: var(--hylo-color-one-dark-darkmode);
  --dh-color-bg-button-primary-hover: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-button-primary: var(--hylo-color-font-body-darkmode);
  --dh-color-text-button-primary-active: var(--hylo-color-font-body-darkmode);
  --dh-color-text-button-primary-hover: var(--hylo-color-font-body-darkmode);
  --dh-color-border-button-primary: transparent;
  --dh-color-bg-button-secondary: transparent;
  --dh-color-bg-button-secondary-active: var(--hylo-color-one-dark-darkmode);
  --dh-color-bg-button-secondary-hover: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-button-secondary: var(--hylo-color-font-body-darkmode);
  --dh-color-text-button-secondary-active: var(--hylo-color-font-body-darkmode);
  --dh-color-text-button-secondary-hover: var(--hylo-color-font-body-darkmode);
  --dh-color-border-button-secondary: var(--hylo-color-gray-light-darkmode);
  --dh-color-bg-button-tetriary: var(--hylo-color-three-darker-darkmode);
  --dh-color-bg-button-tetriary-active: var(--hylo-color-gray-lighter-darkmode);
  --dh-color-bg-button-tetriary-hover: var(--hylo-color-gray-lighter-darkmode);
  --dh-color-text-button-tetriary: var(--hylo-color-three-darkmode);
  --dh-color-text-button-tetriary-active: var(--hylo-color-gray-darkest);
  --dh-color-text-button-tetriary-hover: var(--hylo-color-gray-darkest);
  --dh-color-border-button-tetriary: transparent;
  --dh-color-bg-button-text-active: transparent;
  --dh-color-bg-button-text-hover: transparent;
  --dh-color-text-button-text: var(--hylo-color-one-darkmode);
  --dh-color-text-button-text-active: var(--hylo-color-one-dark-darkmode);
  --dh-color-text-button-text-hover: var(--hylo-color-one-dark-darkmode);
  /* Button - formset*/
  --dh-color-bg-button-formset: var(--dh-color-bg-button-primary);
  --dh-color-bg-button-formset-active: var(--dh-color-bg-button-primary-active);
  --dh-color-bg-button-formset-hover: var(--dh-color-bg-button-primary-hover);
  --dh-color-text-button-formset: var(--dh-color-text-button-primary);
  --dh-color-text-button-formset-active: var(--dh-color-text-button-primary-active);
  --dh-color-text-button-formset-hover: var(--dh-color-text-button-primary-hover);
  --dh-color-border-button-formset: var(--dh-color-border-button-primary);
  --dh-width-formset-addIcon: var(--dh-spacing-6);
  --dh-height-formset-addIcon: var(--dh-spacing-6);
  /* Button - inlines */
  --dh-color-bg-button-inline-save: var(--dh-color-bg-button-primary);
  --dh-color-bg-button-inline-save-active: var(--dh-color-bg-button-primary-active);
  --dh-color-bg-button-inline-save-hover: var(--dh-color-bg-button-primary-hover);
  --dh-color-text-button-inline-save: var(--dh-color-text-button-primary);
  --dh-color-text-button-inline-save-active: var(--dh-color-text-button-primary-active);
  --dh-color-text-button-inline-save-hover: var(--dh-color-text-button-primary-hover);
  --dh-color-border-button-inline-save: var(--dh-color-border-button-primary);
  --dh-color-bg-button-inline-delete: var(--dh-color-bg-button-tetriary);
  --dh-color-bg-button-inline-delete-active: var(--dh-color-bg-button-tetriary-active);
  --dh-color-bg-button-inline-delete-hover: var(--dh-color-bg-button-tetriary-hover);
  --dh-color-text-button-inline-delete: var(--dh-color-text-button-tetriary);
  --dh-color-text-button-inline-delete-active: var(--dh-color-text-button-tetriary-active);
  --dh-color-text-button-inline-delete-hover: var(--dh-color-text-button-tetriary-hover);
  --dh-color-border-button-inline-delete: var(--dh-color-border-button-tetriary);
  --dh-shadow-button-inline-delete: var(--dh-shadow-sm);
  /* --dh-spacing-padding-button: 0.5rem 1rem; */
  --dh-border-radius-button: var(--dh-rounded-md);

  /* Overlay */
  --dh-color-bg-overlay: var(--hylo-color-gray-darkest);

  /* Tables */
  --dh-color-text-table-header: var(--hylo-color-one-darkmode);
  --dh-color-text-table-header-hover: var(--hylo-color-one-light-darkmode);
  --dh-color-text-table-row: var(--hylo-color-one-lighter-darkmode);
  --dh-color-text-table-row-hover: var(--hylo-color-three-lightest-darkmode);
  --dh-color-bg-table-header: var(--hylo-color-four-darkest);
  --dh-color-bg-table-header-hover: var(--hylo-color-four-darkest);
  --dh-color-bg-table-row-odd: var(--hylo-color-gray-dark);
  --dh-color-bg-table-row-even: var(--hylo-color-four-darkest);
  --dh-color-bg-table-row-odd-hover: var(--hylo-color-one-darkmode);
  --dh-color-bg-table-row-even-hover: var(--hylo-color-one-darkmode);
  --dh-color-bg-table-footer: var(--hylo-color-four-darkest);
  --dh-color-bg-table-icon: var(--hylo-color-one-lighter-darkmode);
  --dh-color-text-table-icon: var(--hylo-color-one-darkest-darkmode);

  /* Tags */
  --dh-color-bg-tag-primary: var(--hylo-color-one-darkmode);
  --dh-color-bg-tag-draft: var(--hylo-color-gray-light);
  --dh-color-bg-tag-approved: var(--hylo-color-success-light);
  --dh-color-bg-tag-editing_completed: var(--hylo-color-two-light);
  --dh-color-bg-tag-back_to_revision: var(--hylo-color-warning-light);
  --dh-color-bg-tag-published: var(--hylo-color-one-light);
  --dh-color-text-tag-primary: var(--hylo-color-gray-lightest);
  --dh-color-text-tag-draft: var(--hylo-color-gray-dark);
  --dh-color-text-tag-approved: var(--hylo-color-success-dark);
  --dh-color-text-tag-editing_completed: var(--hylo-color-two-dark);
  --dh-color-text-tag-back_to_revision: var(--hylo-color-warning-dark);
  --dh-color-text-tag-published: var(--hylo-color-one-darkest);
  --dh-border-radius-tag: var(--dh-rounded);

  /* Headers */
  --dh-font-family-header-h1: ABCMonumentGroteskMono,"Courier New",Courier,monospace;
  --dh-font-weight-header-h1: var(--dh-font-weight-normal);
  --dh-font-family-header-h2: ABCMonumentGroteskMono,"Courier New",Courier,monospace;
  --dh-font-weight-header-h2: var(--dh-font-weight-normal);
  --dh-font-family-header-h3: ABCMonumentGroteskMono,"Courier New",Courier,monospace;
  --dh-font-weight-header-h3: var(--dh-font-weight-normal);
}

@media(max-width: 768px) {
  :root {
    --dh-font-size-fieldset-heading: var(--dh-font-size-lg);
    --dh-font-size-formset-heading: var(--dh-font-size-base);
    --dh-font-size-inline-heading: var(--dh-font-size-base);
  }
}