:root.light {
    --color-body-background: #171717;
    --color-body-text: #e5e5e5;
    --color-link: #89c2ff;
    --color-link-hover: #a3cfff;
    --color-content-background: #262626;
    --color-content-background-stacked: #363636;
    --color-content-border: #333;
    --color-navigation-background: #262626;
    --color-navigation-text: #e5e5e5;
    --color-navigation-item-background: transparent;
    --color-navigation-item-background-hover: rgb(255 255 255 / 2.5%);
    --color-navigation-item-background-current: rgb(255 255 255 / 5%);
    --color-navigation-item-border: transparent;
    --color-navigation-item-border-hover: transparent;
    --color-navigation-item-border-current: transparent;
    --color-navigation-item-text: #e5e5e5;
    --color-navigation-item-text-hover: #e5e5e5;
    --color-navigation-item-text-current: #e5e5e5;
    --color-login-background: #262626;
    --color-login-text: #e5e5e5;
    --color-run-background: #fff;
    --color-outline-hover: #e5e5e5;
    --color-outline-focus: #347ebb;
    --color-loading-backdrop: rgb(0 0 0 / 75%);
    --color-loading-spinner-primary: #fff;
    --color-loading-spinner-secondary: rgb(255 255 255 / 25%);
    --color-loading-text: #eee;
    --color-input-background: #191919;
    --color-input-border: #404040;
    --color-input-text: #e5e5e5;
    --color-button-default-background: #fff2;
    --color-button-default-background-hover: #fff3;
    --color-button-default-border: transparent;
    --color-button-default-border-hover: transparent;
    --color-button-default-text: #e5e5e5;
    --color-button-default-text-hover: #e5e5e5;
    --color-button-primary-background: #e5e5e5;
    --color-button-primary-background-hover: #fafafa;
    --color-button-primary-border: transparent;
    --color-button-primary-border-hover: transparent;
    --color-button-primary-text: #000;
    --color-button-primary-text-hover: #000;
    --color-button-secondary-background: transparent;
    --color-button-secondary-background-hover: #fff2;
    --color-button-secondary-border: #fff2;
    --color-button-secondary-border-hover: transparent;
    --color-button-secondary-text: inherit;
    --color-button-secondary-text-hover: inherit;
    --color-button-tertiary-background: transparent;
    --color-button-tertiary-background-hover: #fff2;
    --color-button-tertiary-border: transparent;
    --color-button-tertiary-border-hover: transparent;
    --color-button-tertiary-text: inherit;
    --color-button-tertiary-text-hover: inherit;
    --color-button-ghost-background: rgb(255 255 255/ 2.5%);
    --color-button-ghost-background-hover: rgb(255 255 255 / 5%);
    --color-button-ghost-border: transparent;
    --color-button-ghost-border-hover: transparent;
    --color-button-ghost-text: inherit;
    --color-button-ghost-text-hover: inherit;
    --color-button-transition-background: #166534;
    --color-button-transition-background-hover: #15803d;
    --color-button-transition-border: transparent;
    --color-button-transition-border-hover: transparent;
    --color-button-transition-text: #fff;
    --color-button-transition-text-hover: #fff;
    --color-button-operation-background: #854d0e;
    --color-button-operation-background-hover: #a16207;
    --color-button-operation-border: transparent;
    --color-button-operation-border-hover: transparent;
    --color-button-operation-text: #fff;
    --color-button-operation-text-hover: #fff;
    --color-state-danger-background: #991b1b;
    --color-state-danger-text: #fee2e2;
    --color-state-danger-background-faint: #450a0a;
    --color-state-danger-text-faint: #fecaca;
    --color-state-warning-background: #954e15;
    --color-state-warning-text: #ffead3;
    --color-state-warning-background-faint: #4f2007;
    --color-state-warning-text-faint: #ffedd5;
    --color-state-success-background: #0b4f16;
    --color-state-success-text: #ccf4da;
    --color-state-success-background-faint: #053318;
    --color-state-success-text-faint: #bbf7d0;
    --color-state-information-background: #075985;
    --color-state-information-text: #bae6fd;
    --color-state-information-background-faint: #24394b;
    --color-state-information-text-faint: #92cefcac;
    --color-specification-state-default-background: #3f3f46;
    --color-specification-state-default-text: #e5e5e5;
    --color-specification-state-saved-background: #713f12;
    --color-specification-state-saved-text: #e5e5e5;
    --color-specification-state-pending-background: #3f3f46;
    --color-specification-state-pending-text: #e5e5e5;
    --color-specification-state-completed-background: #14532d;
    --color-specification-state-completed-text: #e5e5e5;
    --color-specification-state-released-background: #1e3a8a;
    --color-specification-state-released-text: #e5e5e5;
    --color-document-state-generating-background: #3f3f46;
    --color-document-state-generating-text: #e5e5e5;
    --color-document-state-ready-background: #14532d;
    --color-document-state-ready-text: #e5e5e5;
}

:root.dark {
    --color-body-background: #171717;
    --color-body-text: #e5e5e5;
    --color-link: #89c2ff;
    --color-link-hover: #a3cfff;
    --color-content-background: #262626;
    --color-content-background-stacked: #363636;
    --color-content-border: #333;
    --color-navigation-background: #262626;
    --color-navigation-text: #e5e5e5;
    --color-navigation-item-background: transparent;
    --color-navigation-item-background-hover: rgb(255 255 255 / 2.5%);
    --color-navigation-item-background-current: rgb(255 255 255 / 5%);
    --color-navigation-item-border: transparent;
    --color-navigation-item-border-hover: transparent;
    --color-navigation-item-border-current: transparent;
    --color-navigation-item-text: #e5e5e5;
    --color-navigation-item-text-hover: #e5e5e5;
    --color-navigation-item-text-current: #e5e5e5;
    --color-login-background: #262626;
    --color-login-text: #e5e5e5;
    --color-run-background: #fff;
    --color-outline-hover: #e5e5e5;
    --color-outline-focus: #347ebb;
    --color-loading-backdrop: rgb(0 0 0 / 75%);
    --color-loading-spinner-primary: #fff;
    --color-loading-spinner-secondary: rgb(255 255 255 / 25%);
    --color-loading-text: #eee;
    --color-input-background: #191919;
    --color-input-border: #404040;
    --color-input-text: #e5e5e5;
    --color-button-default-background: #fff2;
    --color-button-default-background-hover: #fff3;
    --color-button-default-border: transparent;
    --color-button-default-border-hover: transparent;
    --color-button-default-text: #e5e5e5;
    --color-button-default-text-hover: #e5e5e5;
    --color-button-primary-background: #e5e5e5;
    --color-button-primary-background-hover: #fafafa;
    --color-button-primary-border: transparent;
    --color-button-primary-border-hover: transparent;
    --color-button-primary-text: #000;
    --color-button-primary-text-hover: #000;
    --color-button-secondary-background: transparent;
    --color-button-secondary-background-hover: #fff2;
    --color-button-secondary-border: #fff2;
    --color-button-secondary-border-hover: transparent;
    --color-button-secondary-text: inherit;
    --color-button-secondary-text-hover: inherit;
    --color-button-tertiary-background: transparent;
    --color-button-tertiary-background-hover: #fff2;
    --color-button-tertiary-border: transparent;
    --color-button-tertiary-border-hover: transparent;
    --color-button-tertiary-text: inherit;
    --color-button-tertiary-text-hover: inherit;
    --color-button-ghost-background: rgb(255 255 255/ 2.5%);
    --color-button-ghost-background-hover: rgb(255 255 255 / 5%);
    --color-button-ghost-border: transparent;
    --color-button-ghost-border-hover: transparent;
    --color-button-ghost-text: inherit;
    --color-button-ghost-text-hover: inherit;
    --color-button-transition-background: #166534;
    --color-button-transition-background-hover: #15803d;
    --color-button-transition-border: transparent;
    --color-button-transition-border-hover: transparent;
    --color-button-transition-text: #fff;
    --color-button-transition-text-hover: #fff;
    --color-button-operation-background: #854d0e;
    --color-button-operation-background-hover: #a16207;
    --color-button-operation-border: transparent;
    --color-button-operation-border-hover: transparent;
    --color-button-operation-text: #fff;
    --color-button-operation-text-hover: #fff;
    --color-state-danger-background: #991b1b;
    --color-state-danger-text: #fee2e2;
    --color-state-danger-background-faint: #450a0a;
    --color-state-danger-text-faint: #fecaca;
    --color-state-warning-background: #954e15;
    --color-state-warning-text: #ffead3;
    --color-state-warning-background-faint: #4f2007;
    --color-state-warning-text-faint: #ffedd5;
    --color-state-success-background: #0b4f16;
    --color-state-success-text: #ccf4da;
    --color-state-success-background-faint: #053318;
    --color-state-success-text-faint: #bbf7d0;
    --color-state-information-background: #075985;
    --color-state-information-text: #bae6fd;
    --color-state-information-background-faint: #24394b;
    --color-state-information-text-faint: #92cefcac;
    --color-specification-state-default-background: #3f3f46;
    --color-specification-state-default-text: #e5e5e5;
    --color-specification-state-saved-background: #713f12;
    --color-specification-state-saved-text: #e5e5e5;
    --color-specification-state-pending-background: #3f3f46;
    --color-specification-state-pending-text: #e5e5e5;
    --color-specification-state-completed-background: #14532d;
    --color-specification-state-completed-text: #e5e5e5;
    --color-specification-state-released-background: #1e3a8a;
    --color-specification-state-released-text: #e5e5e5;
    --color-document-state-generating-background: #3f3f46;
    --color-document-state-generating-text: #e5e5e5;
    --color-document-state-ready-background: #14532d;
    --color-document-state-ready-text: #e5e5e5;
}