body {
    background: var(--bg);
}

.sidebar {
    background: var(--sidebar);
    border-right-color: var(--line);
}

.side-nav a:hover,
.side-nav a.active,
.nav-dropdown[open] summary,
.nav-dropdown summary:hover {
    background: var(--hover);
}

.metric-card,
.panel {
    background: linear-gradient(145deg, var(--card-start), var(--card-end));
}

.gold-btn {
    background: linear-gradient(135deg, var(--button-start), var(--button-end));
    color: var(--button-text);
}

.ghost-btn,
.outline-btn,
.filter-btn,
.date-chip,
.cart-pill,
.table-status,
.search-box {
    border-color: var(--line);
}

.customer {
    background: radial-gradient(circle at 50% -20%, var(--customer-glow) 0, var(--customer-bg) 38%);
}

.welcome-page,
.welcome-page .main-content {
    background: var(--customer-bg);
}

.order-card,
.cart-drawer {
    background: var(--panel);
}

.product-image {
    background: var(--panel-2);
}

.segmented button.active,
.category-link.active,
.category-link:hover {
    background: var(--hover);
}

.form-label input,
.search-box input,
.account-form input,
.settings-panel input[type="text"],
.settings-panel input[type="url"],
.settings-panel input[type="password"] {
    background: var(--input);
    color: var(--text);
    border-color: var(--line);
}

body[data-theme="light"] .welcome-screen {
    background:
        linear-gradient(180deg, #fffaf0d9, #f0e6d6e8),
        var(--welcome-bg) center / cover no-repeat;
}

body[data-theme="light"] .welcome-page .main-content {
    background: var(--customer-bg);
}

body[data-theme="light"] .welcome-greeting h1,
body[data-theme="light"] .welcome-greeting p,
body[data-theme="light"] .welcome-mini-brand,
body[data-theme="light"] .welcome-emblem {
    text-shadow: none;
}

body[data-theme="light"] .welcome-greeting .eyebrow,
body[data-theme="light"] .welcome-greeting p,
body[data-theme="light"] .welcome-footer,
body[data-theme="light"] .welcome-mini-brand small {
    color: var(--muted);
}

body[data-theme="light"] .welcome-waiter {
    color: var(--text);
    background: #fffdf899;
    border-color: var(--line);
}

body[data-theme="light"] .welcome-cta {
    box-shadow: 0 12px 25px #8f6c3a33;
}

body[data-theme="light"] .logo-upload-icon,
body[data-theme="light"] .logo-preview-box {
    background: var(--panel-2);
    border-color: var(--line);
}