.light {
    --md-sys-color-primary: #904b3e;
    --md-sys-color-surface-tint: #904b3e;
    --md-sys-color-on-primary: #fff;
    --md-sys-color-primary-container: #ffdad4;
    --md-sys-color-on-primary-container: #733429;
    --md-sys-color-secondary: #775650;
    --md-sys-color-on-secondary: #fff;
    --md-sys-color-secondary-container: #ffdad4;
    --md-sys-color-on-secondary-container: #5d3f3a;
    --md-sys-color-tertiary: #6f5c2e;
    --md-sys-color-on-tertiary: #fff;
    --md-sys-color-tertiary-container: #fae0a6;
    --md-sys-color-on-tertiary-container: #554519;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #fff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #93000a;
    --md-sys-color-background: #fff8f6;
    --md-sys-color-on-background: #231918;
    --md-sys-color-surface: #fff8f6;
    --md-sys-color-on-surface: #231918;
    --md-sys-color-surface-variant: #f5ddd9;
    --md-sys-color-on-surface-variant: #534340;
    --md-sys-color-outline: #857370;
    --md-sys-color-outline-variant: #d8c2be;
    --md-sys-color-shadow: #000;
    --md-sys-color-scrim: #000;
    --md-sys-color-inverse-surface: #392e2c;
    --md-sys-color-inverse-on-surface: #ffede9;
    --md-sys-color-inverse-primary: #ffb4a6;
    --md-sys-color-primary-fixed: #ffdad4;
    --md-sys-color-on-primary-fixed: #3a0a04;
    --md-sys-color-primary-fixed-dim: #ffb4a6;
    --md-sys-color-on-primary-fixed-variant: #733429;
    --md-sys-color-secondary-fixed: #ffdad4;
    --md-sys-color-on-secondary-fixed: #2c1511;
    --md-sys-color-secondary-fixed-dim: #e7bdb5;
    --md-sys-color-on-secondary-fixed-variant: #5d3f3a;
    --md-sys-color-tertiary-fixed: #fae0a6;
    --md-sys-color-on-tertiary-fixed: #251a00;
    --md-sys-color-tertiary-fixed-dim: #ddc48c;
    --md-sys-color-on-tertiary-fixed-variant: #554519;
    --md-sys-color-surface-dim: #e8d6d3;
    --md-sys-color-surface-bright: #fff8f6;
    --md-sys-color-surface-container-lowest: #fff;
    --md-sys-color-surface-container-low: #fff0ee;
    --md-sys-color-surface-container: #fceae6;
    --md-sys-color-surface-container-high: #f7e4e1;
    --md-sys-color-surface-container-highest: #f1dfdb;
}
.dark {
    --md-sys-color-primary: #ffb4a6;
    --md-sys-color-surface-tint: #ffb4a6;
    --md-sys-color-on-primary: #561e15;
    --md-sys-color-primary-container: #733429;
    --md-sys-color-on-primary-container: #ffdad4;
    --md-sys-color-secondary: #e7bdb5;
    --md-sys-color-on-secondary: #442a25;
    --md-sys-color-secondary-container: #5d3f3a;
    --md-sys-color-on-secondary-container: #ffdad4;
    --md-sys-color-tertiary: #ddc48c;
    --md-sys-color-on-tertiary: #3d2e04;
    --md-sys-color-tertiary-container: #554519;
    --md-sys-color-on-tertiary-container: #fae0a6;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #1a1110;
    --md-sys-color-on-background: #f1dfdb;
    --md-sys-color-surface: #1a1110;
    --md-sys-color-on-surface: #f1dfdb;
    --md-sys-color-surface-variant: #534340;
    --md-sys-color-on-surface-variant: #d8c2be;
    --md-sys-color-outline: #a08c89;
    --md-sys-color-outline-variant: #534340;
    --md-sys-color-shadow: #000;
    --md-sys-color-scrim: #000;
    --md-sys-color-inverse-surface: #f1dfdb;
    --md-sys-color-inverse-on-surface: #392e2c;
    --md-sys-color-inverse-primary: #904b3e;
    --md-sys-color-primary-fixed: #ffdad4;
    --md-sys-color-on-primary-fixed: #3a0a04;
    --md-sys-color-primary-fixed-dim: #ffb4a6;
    --md-sys-color-on-primary-fixed-variant: #733429;
    --md-sys-color-secondary-fixed: #ffdad4;
    --md-sys-color-on-secondary-fixed: #2c1511;
    --md-sys-color-secondary-fixed-dim: #e7bdb5;
    --md-sys-color-on-secondary-fixed-variant: #5d3f3a;
    --md-sys-color-tertiary-fixed: #fae0a6;
    --md-sys-color-on-tertiary-fixed: #251a00;
    --md-sys-color-tertiary-fixed-dim: #ddc48c;
    --md-sys-color-on-tertiary-fixed-variant: #554519;
    --md-sys-color-surface-dim: #1a1110;
    --md-sys-color-surface-bright: #423735;
    --md-sys-color-surface-container-lowest: #140c0b;
    --md-sys-color-surface-container-low: #231918;
    --md-sys-color-surface-container: #271d1c;
    --md-sys-color-surface-container-high: #322826;
    --md-sys-color-surface-container-highest: #3d3230;
}
html {
    background-color: var(--md-sys-color-background);
}
.bg-white {
    background-color: var(--md-sys-color-surface) !important;
}
.bg-gray-50 {
    background-color: var(--md-sys-color-surface-container-low) !important;
}
.bg-blue-100 {
    background-color: var(--md-sys-color-primary-container) !important;
}
.bg-purple-100 {
    background-color: var(--md-sys-color-secondary-container) !important;
}
.bg-orange-500,
.bg-orange-600 {
    background-color: var(--md-sys-color-error) !important;
}
.bg-orange-100 {
    background-color: var(--md-sys-color-error-container) !important;
}
.bg-black {
    background-color: var(--md-sys-color-shadow) !important;
}
.text-blue-600,
.text-blue-700 {
    color: var(--md-sys-color-primary) !important;
}
.text-green-600,
.text-green-700,
.text-green-800 {
    color: var(--md-sys-color-tertiary) !important;
}
.text-purple-600 {
    color: var(--md-sys-color-secondary) !important;
}
.border-r-4 {
    border-right-color: var(--md-sys-color-primary) !important;
}
.bg-gray-50,
.bg-white {
    background-color: var(--md-sys-color-surface) !important;
}
.text-gray-900 {
    color: var(--md-sys-color-on-surface) !important;
}
.border-transparent {
    border-color: transparent !important;
}
.bg-blue-500,
.bg-blue-600 {
    background-color: var(--md-sys-color-primary) !important;
}
.text-blue-600 {
    color: var(--md-sys-color-primary) !important;
}
.hover\:bg-blue-700:hover {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--md-sys-color-primary) !important;
}
.bg-blue-50 {
    background-color: var(--md-sys-color-primary-container) !important;
}
.bg-green-500,
.bg-green-600 {
    background-color: var(--md-sys-color-tertiary) !important;
}
.text-green-600 {
    color: var(--md-sys-color-tertiary) !important;
}
.bg-green-100 {
    background-color: var(--md-sys-color-tertiary-container) !important;
}
.bg-purple-500,
.bg-purple-600 {
    background-color: var(--md-sys-color-secondary) !important;
}
.bg-orange-500,
.bg-red-500 {
    background-color: var(--md-sys-color-error) !important;
}
.bg-yellow-100 {
    background-color: var(--md-sys-color-secondary-container) !important;
}
.text-red-600 {
    color: var(--md-sys-color-error) !important;
}
.text-yellow-700 {
    color: var(--md-sys-color-on-secondary-container) !important;
}
.border-gray-200,
.border-gray-300 {
    border-color: var(--md-sys-color-outline-variant) !important;
}
.bg-gray-50,
.bg-gray-100,
.bg-white {
    background-color: var(--md-sys-color-surface) !important;
}
.bg-blue-600,
.bg-indigo-600,
.bg-indigo-700 {
    background-color: var(--md-sys-color-primary) !important;
}
.hover\:bg-indigo-700:hover {
    background-color: var(--md-sys-color-on-primary-container) !important;
}
.bg-red-500 {
    background-color: var(--md-sys-color-error) !important;
}
.bg-green-500 {
    background-color: var(--md-sys-color-tertiary) !important;
}
.bg-gray-200 {
    background-color: var(--md-sys-color-outline-variant) !important;
}
.text-gray-800,
.text-gray-900 {
    color: var(--md-sys-color-on-surface) !important;
}
.text-gray-600,
.text-gray-700 {
    color: var(--md-sys-color-on-surface-variant) !important;
}
.text-gray-400,
.text-gray-500 {
    color: var(--md-sys-color-outline) !important;
}
.text-red-500 {
    color: var(--md-sys-color-error) !important;
}
.text-green-500 {
    color: var(--md-sys-color-tertiary) !important;
}
.hover\:text-indigo-600:hover,
.text-blue-600,
.text-indigo-600,
.text-indigo-700 {
    color: var(--md-sys-color-primary) !important;
}
.border-blue-600 {
    border-color: var(--md-sys-color-primary) !important;
}
.text-white {
    color: var(--md-sys-color-on-primary) !important;
}
.border-gray-300 {
    border-color: var(--md-sys-color-outline-variant) !important;
}
.focus\:border-indigo-500:focus,
.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--md-sys-color-primary) !important;
    border-color: var(--md-sys-color-primary) !important;
}
.error-message {
    color: var(--md-sys-color-error) !important;
}
.peer:focus ~ .peer-focus\:text-indigo-600 {
    color: var(--md-sys-color-primary) !important;
}
.bg-onBack {
    background-color: var(--md-sys-color-surface-container) !important;
}
.bg-sc {
    background-color: var(--md-sys-color-secondary-container) !important;
}
.text-osc {
    color: var(--md-sys-color-on-secondary-container) !important;
}
.bg-t {
    background-color: var(--md-sys-color-tertiary) !important;
}
.text-t {
    color: var(--md-sys-color-on-tertiary) !important;
}
input,
select,
textarea {
    background-color: var(--md-sys-color-surface-container) !important;
}
.hover\:bg-gray-50:hover {
    background-color: var(--md-sys-color-surface-container-low) !important;
}
.hover\:text-gray-700:hover {
    color: var(--md-sys-color-on-surface-variant) !important;
}
.bg-green-50 {
    background-color: var(--md-sys-color-tertiary-container) !important;
}
.bg-purple-50 {
    background-color: var(--md-sys-color-secondary-container) !important;
}
.bg-orange-50 {
    background-color: var(--md-sys-color-error-container) !important;
}
.hover\:bg-blue-100:hover,
.hover\:bg-gray-50:hover,
.hover\:bg-green-100:hover,
.hover\:bg-orange-100:hover,
.hover\:bg-purple-100:hover {
    background-color: var(--md-sys-color-surface-container-low) !important;
}

.bg-inversePrimary{
    background-color: var(--md-sys-color-inverse-primary) !important;
}

.text-onInversePrimary{
    color: var(--md-sys-color-on-inverse-primary) !important;
}

.hover\:bg-green-50:hover,
.hover\:bg-blue-50:hover,
.hover\:bg-red-50:hover {
    background-color: var(--md-sys-color-on-primary-fixed-variant) !important;
}

.bg-onErrorContainer{
    background-color: var(--md-sys-color-error-container) !important;
}

.text-onErrorContainer{
    color: var(--md-sys-color-on-error-container) !important;
}

.text-onTertiaryContainer{
    color: var(--md-sys-color-on-tertiary-container)
}

.text-onPrimaryContainer{
    color: var(--md-sys-color-on-primary-container) !important;
}