/* PhaseT10 - global Appearance-aware background system */
:root {
    --sf-theme-page: color-mix(in srgb, var(--green) 4%, var(--paper));
    --sf-theme-panel: color-mix(in srgb, var(--green) 2%, var(--paper));
    --sf-theme-header: color-mix(in srgb, var(--green) 6%, var(--paper));
    --sf-theme-field: var(--paper);
}

html,
body {
    background-color: var(--soft) !important;
    background-color: var(--sf-theme-page) !important;
}

body > .main,
.main > main,
.main > .content,
#app {
    background-color: transparent !important;
}

/* Form and workspace containers receive only a quiet theme tint. */
.card,
.panel,
.form-card,
.form-panel,
.workspace-card,
fieldset,
dialog {
    background-color: var(--sf-theme-panel) !important;
}

/* Working controls stay clean and high contrast. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
    background-color: var(--sf-theme-field) !important;
}

/* The table canvas stays clean; existing row, status, and header colors win. */
table {
    background-color: var(--sf-theme-field);
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
    :root {
        --sf-theme-page: var(--soft);
        --sf-theme-panel: var(--paper);
        --sf-theme-header: var(--soft);
    }
}