:root.light {
    --color-body-background: #eee;
    --color-body-text: #111;
    --color-link: #1558bc;
    --color-link-hover: #1868db;
    --color-content-background: #fafafa;
    --color-content-background-stacked: #fdfdfd;
    --color-content-border: #ddd;
    --color-navigation-background: #f8f8f8;
    --color-navigation-text: #111;
    --color-navigation-item-background: transparent;
    --color-navigation-item-background-hover: rgb(0 0 0 / 2.5%);
    --color-navigation-item-background-current: rgb(0 0 0 / 5%);
    --color-navigation-item-border: transparent;
    --color-navigation-item-border-hover: transparent;
    --color-navigation-item-border-current: transparent;
    --color-navigation-item-text: #111;
    --color-navigation-item-text-hover: #111;
    --color-navigation-item-text-current: #111;
    --color-login-background: #fafafa;
    --color-login-text: #111;
    --color-run-background: #fff;
    --color-outline-hover: #262626;
    --color-outline-focus: #347ebb;
    --color-loading-backdrop: rgb(255 255 255 / 75%);
    --color-loading-spinner-primary: #111;
    --color-loading-spinner-secondary: rgb(0 0 0 / 25%);
    --color-loading-text: #111;
    --color-input-background: #fafafa;
    --color-input-border: #d1d5db;
    --color-input-text: #111;
    --color-button-default-background: #0001;
    --color-button-default-background-hover: #0002;
    --color-button-default-border: transparent;
    --color-button-default-border-hover: transparent;
    --color-button-default-text: inherit;
    --color-button-default-text-hover: inherit;
    --color-button-primary-background: #262626;
    --color-button-primary-background-hover: #0a0a0a;
    --color-button-primary-border: transparent;
    --color-button-primary-border-hover: transparent;
    --color-button-primary-text: #fafafa;
    --color-button-primary-text-hover: #fafafa;
    --color-button-secondary-background: transparent;
    --color-button-secondary-background-hover: #0001;
    --color-button-secondary-border: #0001;
    --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: #0001;
    --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(0 0 0 / 2.5%);
    --color-button-ghost-background-hover: rgb(0 0 0 / 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: #4ade80;
    --color-button-transition-background-hover: #22c55e;
    --color-button-transition-border: transparent;
    --color-button-transition-border-hover: transparent;
    --color-button-transition-text: #111;
    --color-button-transition-text-hover: #111;
    --color-button-operation-background: #fbbf24;
    --color-button-operation-background-hover: #dba517;
    --color-button-operation-border: transparent;
    --color-button-operation-border-hover: transparent;
    --color-button-operation-text: #111;
    --color-button-operation-text-hover: #111;
    --color-state-danger-background: #dc2626;
    --color-state-danger-text: #fef2f2;
    --color-state-danger-background-faint: #fee2e2;
    --color-state-danger-text-faint: #7f1d1d;
    --color-state-warning-background: #c2410c;
    --color-state-warning-text: #ffefe2;
    --color-state-warning-background-faint: #ffe3cc;
    --color-state-warning-text-faint: #843c01;
    --color-state-success-background: #16a34a;
    --color-state-success-text: #e8f7eb;
    --color-state-success-background-faint: #bfffc9;
    --color-state-success-text-faint: #14532d;
    --color-state-information-background: #0f518a;
    --color-state-information-text: #e4f1fc;
    --color-state-information-background-faint: #dbedfd;
    --color-state-information-text-faint: #0f518a;
    --color-specification-state-default-background: #e4e4e7;
    --color-specification-state-default-text: #111;
    --color-specification-state-saved-background: #ffebbd;
    --color-specification-state-saved-text: #111;
    --color-specification-state-pending-background: #e4e4e7;
    --color-specification-state-pending-text: #111;
    --color-specification-state-completed-background: #bbf5d0;
    --color-specification-state-completed-text: #111;
    --color-specification-state-released-background: #cfecff;
    --color-specification-state-released-text: #111;
    --color-document-state-generating-background: #e4e4e7;
    --color-document-state-generating-text: #111;
    --color-document-state-ready-background: #bbf5d0;
    --color-document-state-ready-text: #111;
}

: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: #92cefc;
    --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;
}