:root {
    --app-brand-300: #e69875;
    --app-brand-400: #e78a4e;
    --app-brand-500: #d65d0e;
    --app-brand-600: #c35e0a;
    --app-brand-700: #a35a08;
    --app-error-300: #f2a49a;
    --app-error-400: #ea6962;
    --app-error-500: #d94a42;
    --app-error-600: #c14a4a;
}

:root[data-theme="light"] {
    --pico-background-color: #fbf1c7;
    --pico-color: #654735;
    --pico-muted-color: #7c6f64;
    --pico-muted-border-color: #d5c4a1;
    --pico-primary: var(--app-brand-600);
    --pico-primary-hover: var(--app-brand-700);
    --pico-primary-focus: color-mix(in srgb, var(--app-brand-500) 35%, transparent);
    --pico-primary-inverse: #ffffff;
    --pico-primary-background: var(--app-brand-600);
    --pico-primary-border: var(--app-brand-600);
    --pico-primary-hover-background: var(--app-brand-700);
    --pico-primary-hover-border: var(--app-brand-700);
    --pico-primary-underline: color-mix(in srgb, var(--app-brand-600) 50%, transparent);
    --pico-primary-hover-underline: var(--app-brand-700);
    --pico-text-selection-color: color-mix(in srgb, var(--app-brand-500) 20%, transparent);
    --pico-card-background-color: #f2e5bc;
    --pico-card-sectioning-background-color: #ebdbb2;
    --pico-card-border-color: #d5c4a1;
    --pico-form-element-background-color: #fbf1c7;
    --pico-form-element-border-color: #d5c4a1;
    --pico-form-element-color: #654735;
    --pico-form-element-active-background-color: #fbf1c7;
    --pico-form-element-active-border-color: var(--app-brand-500);
    --pico-form-element-focus-color: color-mix(in srgb, var(--app-brand-500) 25%, transparent);
    --pico-mark-background-color: #d79921;
    --pico-mark-color: #282828;
    --pico-code-background-color: #ebdbb2;
    --pico-code-color: #4f3829;
    --app-error: var(--app-error-600);
    --app-error-background: color-mix(in srgb, var(--app-error-600) 10%, var(--pico-background-color));
    --app-error-border: color-mix(in srgb, var(--app-error-600) 40%, var(--pico-background-color));
    --app-danger: var(--app-error-600);
    --app-danger-hover: color-mix(in srgb, var(--app-error-600) 80%, #000000);
    --app-danger-inverse: #ffffff;
}

:root[data-theme="dark"] {
    --pico-background-color: #282828;
    --pico-color: #d4be98;
    --pico-muted-color: #a89984;
    --pico-muted-border-color: #504945;
    --pico-primary: var(--app-brand-400);
    --pico-primary-hover: var(--app-brand-300);
    --pico-primary-focus: color-mix(in srgb, var(--app-brand-400) 30%, transparent);
    --pico-primary-inverse: #282828;
    --pico-primary-background: var(--app-brand-400);
    --pico-primary-border: var(--app-brand-400);
    --pico-primary-hover-background: var(--app-brand-300);
    --pico-primary-hover-border: var(--app-brand-300);
    --pico-primary-underline: color-mix(in srgb, var(--app-brand-400) 50%, transparent);
    --pico-primary-hover-underline: var(--app-brand-300);
    --pico-text-selection-color: color-mix(in srgb, var(--app-brand-500) 25%, transparent);
    --pico-card-background-color: #32302f;
    --pico-card-sectioning-background-color: #3c3836;
    --pico-card-border-color: #504945;
    --pico-form-element-background-color: #32302f;
    --pico-form-element-border-color: #504945;
    --pico-form-element-color: #ebdbb2;
    --pico-form-element-active-background-color: #282828;
    --pico-form-element-active-border-color: var(--app-brand-400);
    --pico-form-element-focus-color: color-mix(in srgb, var(--app-brand-400) 30%, transparent);
    --pico-mark-background-color: #d79921;
    --pico-mark-color: #282828;
    --pico-code-background-color: #3c3836;
    --pico-code-color: #ebdbb2;
    --app-error: var(--app-error-400);
    --app-error-background: color-mix(in srgb, var(--app-error-500) 12%, var(--pico-background-color));
    --app-error-border: color-mix(in srgb, var(--app-error-500) 40%, var(--pico-background-color));
    --app-danger: var(--app-error-400);
    --app-danger-hover: var(--app-error-300);
    --app-danger-inverse: var(--pico-primary-inverse);
}