.surface-primary {
    background: var(--color-surface);
    border: 1px solid var(--color-separator);
}

.surface-secondary { background: var(--color-surface-secondary); }
.surface-elevated {
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-medium);
}

.glass-navigation,
.glass-tab-bar,
.glass-sheet,
.glass-button,
.glass-floating-action {
    border: 1px solid var(--glass-border);
    background: var(--glass-control-background);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

.glass-navigation,
.glass-tab-bar { background: var(--glass-navigation-background); }
.glass-sheet { background: var(--glass-sheet-background); }

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .glass-navigation, .glass-tab-bar, .glass-sheet, .glass-button, .glass-floating-action {
        background: var(--color-surface-elevated);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .glass-navigation, .glass-tab-bar, .glass-sheet, .glass-button, .glass-floating-action {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: var(--color-surface-elevated) !important;
        box-shadow: var(--shadow-small);
    }
}