:root, ::backdrop {
  /* Main */
  --dh-color-accent: var(--hylo-color-one);
  --dh-color-bg-body: var(--hylo-color-white);
  --dh-color-text-body: var(--hylo-color-black);
  --dh-color-text-link: var(--dh-color-accent);
  --dh-color-text-link-hover: var(--dh-color-accent);
  --dh-color-text-error: var(--hylo-color-error-500);
  --dh-color-text-success: var(--hylo-color-success);
  --dh-color-text-muted: var(--hylo-color-gray-500);
  --dh-color-text-muted-hover: var(--hylo-color-white);
  --dh-color-outline: var(--dh-color-accent);
  --dh-font-family-body: 'Work Sans', sans-serif;

  /* Sidebar */
  --dh-color-bg-sidebar: var(--hylo-color-gray-50);
  --dh-color-bg-sidebar-active: var(--hylo-color-gray-200);
  --dh-color-bg-sidebar-hover: var(--hylo-color-gray-200);
  --dh-color-text-sidebar: var(--hylo-color-black);
  --dh-color-text-sidebar-active: var(--dh-color-accent);
  --dh-color-text-sidebar-hover: var(--dh-color-accent);
  --dh-color-text-sidebar-header: var(--hylo-color-black);

  /* Top Navigation */
  --dh-color-bg-top_nav: var(--hylo-color-white);
  --dh-color-text-top_nav: var(--hylo-color-black);

  /* Tabs */
  --dh-color-bg-tab: transparent;
  --dh-color-bg-tab-active: var(--hylo-color-gray-100);
  --dh-color-bg-tab-hover: var(--hylo-color-gray-100);
  --dh-color-text-tab: var(--hylo-color-black);
  --dh-color-text-tab-active: var(--hylo-color-black);
  --dh-color-text-tab-hover: var(--dh-color-accent);

  /* Horizontal tabs */
  --dh-color-text-horizontal_tab: var(--hylo-color-gray);
  --dh-color-text-horizontal_tab-hover: var(--hylo-color-one);
  --dh-color-text-horizontal_tab-active: var(--dh-color-accent);
  --dh-color-border_bottom-horizontal_tab: transparent;
  --dh-color-border_bottom-horizontal_tab-hover: var(--dh-color-accent);
  --dh-color-border_bottom-horizontal_tab-active: var(--dh-color-accent);
  --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(--dh-color-accent);
  
  /* Dropdown */
  --dh-color-bg-dropdown: var(--hylo-color-white);
  --dh-color-bg-dropdown-hover: var(--dh-color-accent);
  --dh-color-text-dropdown: var(--hylo-color-black);
  --dh-color-text-dropdown-hover: var(--hylo-color-white);
  --dh-color-border-dropdown: var(--dh-color-accent);
  --dh-color-text-button-option: var(--dh-color-text-body);
  --dh-color-text-button-option-hover: var(--dh-color-text-body);
  --dh-color-text-button-option-active: var(--dh-color-text-body);
  --dh-color-bg-button-option: transparent;
  --dh-color-bg-button-option-hover: var(--hylo-color-gray-200);
  --dh-color-bg-button-option-active: var(--hylo-color-one-200);

  /* Fieldset */
  --dh-color-bg-fieldset: var(--hylo-color-gray-50);
  --dh-color-border-fieldset: transparent;
  --dh-border-radius-fieldset: var(--dh-rounded-md);
  --dh-color-text-fieldset-heading: var(--dh-color-text-body);
  --dh-font-size-fieldset-heading: var(--dh-font-size-lg);
  --dh-font-weight-fieldset-heading: var(--dh-font-weight-medium);
  --dh-padding-x-fieldset: var(--dh-spacing-4);
  --dh-padding-y-fieldset: var(--dh-spacing-2);

  /* Formset */
  --dh-color-bg-formset: transparent;
  --dh-color-border-formset: transparent;
  --dh-border-radius-formset: 0;
  --dh-font-size-formset-heading: var(--dh-font-size-lg);
  --dh-font-weight-formset-heading: var(--dh-font-weight-medium);
  --dh-color-text-formset-subheading: var(--dh-color-text-body);

  /* Inline */  
  --dh-color-bg-inline: var(--hylo-color-gray-100);
  --dh-color-border-inline: transparent;
  --dh-color-text-inline: var(--hylo-color-black);
  --dh-color-text-inline-heading: var(--hylo-color-gray-900);
  --dh-color-text-inline-heading-open: var(--hylo-color-black);
  --dh-color-text-inline-subheading: var(--hylo-color-black);
  --dh-color-text-inline-helptext: var(--hylo-color-gray-600);
  --dh-font-size-inline-heading: var(--dh-font-size-base);
  --dh-font-weight-inline-heading: var(--dh-font-weight-medium);
  --dh-border-radius-inline: var(--dh-rounded-md);
  --dh-padding-x-inline: var(--dh-spacing-4);
  --dh-padding-y-inline: var(--dh-spacing-2);

  /* Field */
  --dh-color-bg-field: var(--hylo-color-white);
  --dh-color-bg-field-readonly: var(--hylo-color-one-50);
  --dh-color-text-field: var(--hylo-color-black);
  --dh-color-text-field-error: var(--hylo-color-error-500);
  --dh-color-text-field-readonly: var(--hylo-color-gray-300);
  --dh-color-border-field: var(--dh-color-accent);
  --dh-color-border-field-readonly: transparent;
  --dh-color-border-field-focus: var(--dh-color-accent);
  --dh-color-border-field-error: var(--hylo-color-error);
  --dh-color-border-field-error-focus: var(--hylo-color-error);
  --dh-color-text-field-placeholder: var(--hylo-color-gray-500);
  --dh-color-text-field-placeholder-error: var(--hylo-color-error);
  --dh-color-field-icon: var(--hylo-color-gray-500);
  --dh-color-scheme-field: light;
  --dh-color-text-field-label: var(--hylo-color-three-lightest-darkmode );
  --dh-border-radius-field: var(--dh-rounded);
  --dh-line-height-field: var(--dh-spacing-5); /* used by dh-date-field */
  --dh-line-height-field-label: var(--dh-spacing-5); /* 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-width-2);
  /* --dh-height-field: 3rem; */
  /* --dh-spacing-padding_vertical-field: 0.75rem; */
  /* --dh-spacing-padding_horizontal-field: 0.75rem; */

  /* Checkboxes */
  /* --dh-size-checkbox: 1.5rem; */
  --dh-color-text-checkbox: var(--dh-color-accent);
  --dh-border-radius-checkbox: var(--dh-rounded);

  /* Select */
  --dh-color-bg-select-selected: var(--dh-color-accent);
  --dh-color-bg-select-hover: var(--hylo-color-one-300);

  /* Rounded Icons */
  --dh-color-bg-icon-primary: var(--dh-color-accent);
  --dh-color-text-icon-primary: var(--dh-color-white);
  --dh-color-bg-icon-secondary: var(--hylo-color-one-200);
  --dh-color-text-icon-secondary: var(--hylo-color-gray-800);
  --dh-color-bg-icon-tertiary: transparent;
  --dh-color-text-icon-tertiary: inherit;
  --dh-border-radius-icon: var(--dh-rounded-md);
  --dh-border-width-icon: var(--dh-border);
  --dh-color-border-icon: var(--hylo-color-gray-500);
  --dh-size-icon-xs: var(--dh-spacing-6);
  --dh-size-icon-sm: var(--dh-spacing-9);
  --dh-size-icon-md: var(--dh-spacing-14);
  --dh-size-icon-lg: var(--dh-spacing-24);

  /* Buttons */
  --dh-color-bg-button-primary: var(--dh-color-accent);
  --dh-color-bg-button-primary-active: var(--hylo-color-one-700);
  --dh-color-bg-button-primary-hover: var(--hylo-color-one-700);
  --dh-color-text-button-primary: var(--hylo-color-white);
  --dh-color-text-button-primary-active: var(--hylo-color-white);
  --dh-color-text-button-primary-hover: var(--hylo-color-white);
  --dh-color-border-button-primary: transparent;
  --dh-color-bg-button-secondary: var(--hylo-color-white);
  --dh-color-bg-button-secondary-active: var(--hylo-color-gray-50);
  --dh-color-bg-button-secondary-hover: var(--hylo-color-gray-50);
  --dh-color-text-button-secondary: var(--hylo-color-gray-900);
  --dh-color-text-button-secondary-active: var(--hylo-color-gray-900);
  --dh-color-text-button-secondary-hover: var(--hylo-color-gray-900);
  --dh-color-border-button-secondary: var(--hylo-color-gray-500);
  --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-gray-500);
  --dh-color-text-button-tetriary-active: var(--hylo-color-gray-800);
  --dh-color-text-button-tetriary-hover: var(--hylo-color-gray-800);
  --dh-color-border-button-tetriary: transparent;
  --dh-color-bg-button-text-active: var(--hylo-color-gray-200);
  --dh-color-bg-button-text-hover: var(--hylo-color-gray-200);
  --dh-color-text-button-text: var(--dh-color-accent);
  --dh-color-text-button-text-active: var(--hylo-color-one-700);
  --dh-color-text-button-text-hover: var(--hylo-color-one-700);
  --dh-color-text-button-dropdown: var(--dh-color-text-body);
  --dh-color-text-button-dropdown-hover: var(--dh-color-text-body);
  --dh-color-text-button-dropdown-active: var(--dh-color-text-body);
  --dh-color-bg-button-dropdown-hover: var(--hylo-color-one-100);
  --dh-color-bg-button-dropdown-active: var(--hylo-color-one-200);
  /* Gray buttons */
  --dh-color-bg-button-gray-primary: var(--hylo-color-gray-700);
  --dh-color-bg-button-gray-primary-active: var(--hylo-color-gray-700);
  --dh-color-bg-button-gray-primary-hover: var(--hylo-color-gray-700);
  --dh-color-text-button-gray-primary: var(--dh-color-white);
  --dh-color-text-button-gray-primary-active: var(--dh-color-white);
  --dh-color-text-button-gray-primary-hover: var(--dh-color-white);
  --dh-color-border-button-gray-primary: transparent;
  --dh-color-bg-button-gray-secondary: var(--hylo-color-gray-50);
  --dh-color-bg-button-gray-secondary-active: var(--hylo-color-gray-200);
  --dh-color-bg-button-gray-secondary-hover: var(--hylo-color-gray-200);
  --dh-color-text-button-gray-secondary: var(--dh-color-text-body);
  --dh-color-text-button-gray-secondary-active: var(--dh-color-text-body);
  --dh-color-text-button-gray-secondary-hover: var(--dh-color-text-body);
  --dh-color-border-button-gray-secondary: transparent;
  /* Button - selected modifier */
  --dh-color-text-button-selected: var(--dh-color-text-body);
  --dh-color-bg-button-selected: var(--hylo-color-one-200);

/* Button - formset*/
  --dh-color-bg-button-formset: var(--dh-color-bg-button-secondary);
  --dh-color-bg-button-formset-active: var(--dh-color-bg-button-secondary-active);
  --dh-color-bg-button-formset-hover: var(--dh-color-bg-button-secondary-hover);
  --dh-color-text-button-formset: var(--dh-color-text-button);
  --dh-color-text-button-formset-active: var(--dh-color-text-button-text-active);
  --dh-color-text-button-formset-hover: var(--dh-color-text-button-text-hover);
  --dh-color-border-button-formset: var(--dh-color-border-button-secondary);
  --dh-width-formset-addIcon: var(--dh-spacing-4);
  --dh-height-formset-addIcon: var(--dh-spacing-4);
  /* 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-text);
  --dh-color-bg-button-inline-delete-active: var(--dh-color-bg-button-text-active);
  --dh-color-bg-button-inline-delete-hover: var(--dh-color-bg-button-text-hover);
  --dh-color-text-button-inline-delete: var(--dh-color-text-button-text);
  --dh-color-text-button-inline-delete-active: var(--dh-color-text-button-text-active);
  --dh-color-text-button-inline-delete-hover: var(--dh-color-text-button-text-hover);
  --dh-color-border-button-inline-delete: transparent;
  --dh-shadow-button-inline-delete: var(--dh-shadow-none);
  /* --dh-spacing-padding-button: 0.5rem 1rem; */
  --dh-border-radius-button: var(--dh-rounded);

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

  /* Tables */
  --dh-color-text-table-header: var(--hylo-color-black);
  --dh-color-text-table-header-hover: var(--dh-color-accent);
  --dh-color-text-table-row: var(--hylo-color-black);
  --dh-color-text-table-row-hover: var(--hylo-color-black);
  --dh-color-bg-table-header: var(--hylo-color-gray-100);
  --dh-color-bg-table-header-hover: var(--hylo-color-gray-100);
  --dh-color-bg-table-row-odd: var(--hylo-color-white);
  --dh-color-bg-table-row-even: var(--hylo-color-gray-100);
  --dh-color-bg-table-row-odd-hover: var(--hylo-color-one-50);
  --dh-color-bg-table-row-even-hover: var(--hylo-color-one-50);
  --dh-color-bg-table-footer: var(--hylo-color-gray-100);
  --dh-color-bg-table-icon: var(--hylo-color-one-100);
  --dh-color-text-table-icon: var(--hylo-color-gray-800);

  /* Tags */
  --dh-color-bg-tag-primary: var(--hylo-color-one-300);
  --dh-color-bg-tag-draft: var(--hylo-color-gray-200);
  --dh-color-bg-tag-approved: var(--hylo-color-success-200);
  --dh-color-bg-tag-editing_completed: var(--hylo-color-two-200);
  --dh-color-bg-tag-back_to_revision: var(--hylo-color-warning-200);
  --dh-color-bg-tag-published: var(--hylo-color-one-300);
  --dh-color-text-tag-primary: var(--hylo-color-gray-500);
  --dh-color-text-tag-draft: var(--hylo-color-gray-700);
  --dh-color-text-tag-approved: var(--hylo-color-success-700);
  --dh-color-text-tag-editing_completed: var(--hylo-color-two-700);
  --dh-color-text-tag-back_to_revision: var(--hylo-color-warning-700);
  --dh-color-text-tag-published: var(--hylo-color-one-700);
  --dh-border-radius-tag: var(--dh-rounded);

  /* Taost noitifications */
  --dh-color-bg-toast-info: var(--dh-color-white);
  --dh-color-bg-toast-success: var(--dh-color-white);
  --dh-color-bg-toast-warning: var(--dh-color-white);
  --dh-color-bg-toast-error: var(--dh-color-white);
  --dh-color-text-toast-info: var(--hylo-color-gray-900);
  --dh-color-text-toast-success: var(--hylo-color-gray-900);
  --dh-color-text-toast-warning: var(--hylo-color-gray-900);
  --dh-color-text-toast-error: var(--hylo-color-gray-900);
  --dh-color-border-toast-info: var(--dh-color-blue-500);
  --dh-color-border-toast-success: var(--hylo-color-success-500);
  --dh-color-border-toast-warning: var(--hylo-color-warning-500);
  --dh-color-border-toast-error: var(--hylo-color-error-500);
  --dh-color-bg-toast-icon-info: transparent;
  --dh-color-bg-toast-icon-success: transparent;
  --dh-color-bg-toast-icon-warning: transparent;
  --dh-color-bg-toast-icon-error: transparent;
  --dh-color-text-toast-icon-info: var(--dh-color-blue-500);
  --dh-color-text-toast-icon-success: var(--hylo-color-success-500);
  --dh-color-text-toast-icon-warning: var(--hylo-color-warning-500);
  --dh-color-text-toast-icon-error: var(--hylo-color-error-500);
  --dh-border-radius-toast: var(--dh-rounded);

  /* Headers */
  --dh-font-family-header-h1: 'Work Sans', sans-serif;
  --dh-font-weight-header-h1: var(--dh-font-weight-bold);
  --dh-font-family-header-h2: 'Work Sans', sans-serif;
  --dh-font-weight-header-h2: var(--dh-font-weight-bold);
  --dh-font-family-header-h3: 'Work Sans', sans-serif;
  --dh-font-weight-header-h3: var(--dh-font-weight-bold);

  /* Welcome page */
  --dh-color-bg-welcomepage-main: var(--hylo-color-gray-50);
  --dh-color-bg-welcomepage-header: var(--hylo-color-one-50);
  --dh-color-text-welcomepage-header: var(--hylo-color-one-700);
  --dh-color-bg-welcomepage-header-avatar: var(--dh-color-bg-icon-primary);
  --dh-color-bg-welcomepage-header-avatar-hover: var(--dh-color-bg-icon-primary);
  --dh-color-text-welcomepage-header-avatar: var(--dh-color-text-icon-primary);
  --dh-color-border-welcomepage-header-avatar: var(--hylo-color-one-300);
  --dh-color-text-welcomepage-header-profile: var(--hylo-color-one-500);
  --dh-color-border-welcomepage-header-profile: var(--hylo-color-one-500);
  /* --dh-color-bg-welcomepage-button-primary: var(--hylo-color-one-200);
  --dh-color-bg-welcomepage-button-primary-hover: var(--hylo-color-one-300);
  --dh-color-text-welcomepage-button-primary: var(--hylo-color-one-600); */
  --dh-color-icon-welcomepage-button-primary: var(--hylo-color-white);
  --dh-color-bg-welcomepage-button-secondary: var(--hylo-color-one-300);
  --dh-color-bg-welcomepage-button-secondary-hover: var(--dh-color-accent);
  --dh-color-text-welcomepage-button-secondary: var(--hylo-color-black);
  --dh-color-icon-welcomepage-button-secondary: var(--hylo-color-black);
  --dh-color-bg-welcomepage-infobox: var(--hylo-color-one-50);
  --dh-color-text-welcomepage-infobox: var(--hylo-color-gray-600);
  --dh-color-border-welcomepage-infobox: var(--hylo-color-one-300);
  --dh-color-icon-welcomepage-infobox: var(--hylo-color-one-500);
  --dh-color-divider-welcomepage-accordion: var(--hylo-color-gray-600);
  --dh-color-bg-welcomepage-accordion-item-header-hover: var(--hylo-color-one-100);
  --dh-color-text-welcomepage-accordion-item-header: var(--hylo-color-one-700);
  --dh-color-icon-welcomepage-accordion-item-header: var(--hylo-color-one-700);
  --dh-font-family-welcome-faqs-heading: 'Lora', sans-serif;
}

@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);
  }
}