:root{
    /* border */
    --border-width: 1px;
    --large-border-width: 2px;
    /* transition duration */
    --transition-duration: 0.2s;
    /* shadow */
    --shadow: 0 4px 6px -1px var(--background-overlay-grey), 0 2px 4px -2px var(--background-overlay-grey);
    /* focus */
    --focus-color: var(--system-focus-default);
    --focus-width: 2px;
    --focus-style: solid;
    --focus-offset: 2px;
    /* input */
    --input-background: var(--background-default-grey);
    --input-disabled-background: var(--background-disabled-grey);
    --input-border-color: var(--border-plain-grey);
    --input-disabled-border-color: var(--border-disabled-grey);
    --input-color: var(--text-default-grey);
    --input-disabled-color: var(--text-disabled-grey);
    --input-padding-x: 1rem;
    --input-padding-y: 0.5rem;
    --input-border-raduis: 0.25rem 0.25rem 0px 0px;
    /* datatable */
    --datatable-background: var(--background-default-grey);
    --datatable-alt-background: var(--background-alt-grey);
    --datatable-hover-background: var(--background-alt-grey-hover);
    --datatable-active-background: var(--background-alt-grey-active);
    --datatable-row-color: var(--text-default-grey);
    --datatable-header-cell-color: var(--text-title-grey);
    /* menu */
    --menu-container-border-color: var(--border-default-grey);
    --menu-border-width: 0px 0px 0px var(--large-border-width);
    --menu-default-background: var(--background-transparent);
    --menu-default-color: var(--text-default-grey);
    --menu-active-color: var(--text-active-blue-france);
    --menu-hover-background: var(--background-transparent-active);
    --menu-padding: 0.25rem;
    --menu-item-gap: 0.25rem;
    --menu-gap: 0px;
    --menu-indent: 1rem;
    --menu-border-color: transparent;
    --menu-border-color-active: var(--border-active-blue-france);
}