:root {
    color-scheme: dark;
    --cq-page: #09090b;
    --cq-surface: #111113;
    --cq-surface-raised: #17171a;
    --cq-border: rgba(255, 255, 255, .1);
    --cq-text: #f4f4f5;
    --cq-muted: #a1a1aa;
}

html[data-coliqra-theme="light"] {
    color-scheme: light;
    --cq-page: #f7f6f2;
    --cq-surface: #fff;
    --cq-surface-raised: #f1eee7;
    --cq-border: rgba(24, 24, 27, .13);
    --cq-text: #202024;
    --cq-muted: #66666f;

    --coliqra-bg: #f7f6f2;
    --coliqra-surface: #fff;
    --coliqra-surface-raised: #f1eee7;
    --coliqra-border: #d8d5ce;
    --coliqra-text: #202024;
    --coliqra-muted: #66666f;

    --mud-palette-background: #f7f6f2 !important;
    --mud-palette-background-gray: #efede7 !important;
    --mud-palette-surface: #fff !important;
    --mud-palette-appbar-background: rgba(255, 255, 255, .94) !important;
    --mud-palette-appbar-text: #202024 !important;
    --mud-palette-drawer-background: #fbfaf7 !important;
    --mud-palette-drawer-text: #303034 !important;
    --mud-palette-drawer-icon: #66666f !important;
    --mud-palette-text-primary: #202024 !important;
    --mud-palette-text-secondary: #66666f !important;
    --mud-palette-action-default: #4d4d55 !important;
    --mud-palette-lines-default: #d8d5ce !important;
    --mud-palette-lines-inputs: #c8c4bc !important;
    --mud-palette-table-lines: #dedbd4 !important;
    --mud-palette-divider: #dedbd4 !important;
}

html[data-coliqra-theme="light"],
html[data-coliqra-theme="light"] body {
    background: var(--cq-page);
    color: var(--cq-text);
}

html[data-coliqra-theme="light"] .coliqra-shell {
    background: radial-gradient(circle at 78% -20%, rgba(196, 151, 72, .08), transparent 34rem), var(--cq-page);
}

html[data-coliqra-theme="light"] .coliqra-appbar,
html[data-coliqra-theme="light"] .portal-topbar,
html[data-coliqra-theme="light"] .loggedout-topbar {
    background: rgba(255, 255, 255, .94) !important;
    color: var(--cq-text);
}

html[data-coliqra-theme="light"] .coliqra-drawer,
html[data-coliqra-theme="light"] .coliqra-native-mobile-drawer,
html[data-coliqra-theme="light"] .portal-sidebar {
    background: #fbfaf7 !important;
}

html[data-coliqra-theme="light"] .coliqra-mobile-nav {
    border-color: rgba(0, 0, 0, .13);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 45px rgba(70, 57, 37, .16);
}

html[data-coliqra-theme="light"] .mud-overlay {
    background-color: rgba(20, 20, 24, .45) !important;
}

html[data-coliqra-theme="light"] input,
html[data-coliqra-theme="light"] select,
html[data-coliqra-theme="light"] textarea {
    color-scheme: light;
}

html[data-coliqra-theme="light"] #components-reconnect-modal {
    background: rgba(237, 233, 224, .85);
}

/* The brand orb stays bright in both themes. It is artwork, not a surface. */
.logo-mark,
.login-brand-mark,
.billing-plan-mark,
.public-booking > header i,
.public-quote-topbar > a i,
.quote-company > i,
.period-public-topbar > a i,
.period-company > i,
.shared-brand i {
    background: radial-gradient(circle at 30% 20%, #ff72d2, #ffd86a 42%, #fff 88%) !important;
}

.setup-company-mark {
    background: radial-gradient(circle at 30% 20%, #ff93d8, #ffd77b 42%, #fff 88%) !important;
}

html[data-coliqra-theme="light"] .invitation-page {
    background: radial-gradient(circle at top, #e5e5df, #fafaf9 58%, #f3f1eb);
}

html[data-coliqra-theme="light"] .admin-invitation {
    background: radial-gradient(ellipse at top, #f1e7cf 0, #f7f6f2 60%);
}

@media print {
    .coliqra-theme-toggle { display: none !important; }
}

.public-quote-actions,
.period-public-actions,
.shared-topbar-actions,
.pb-header-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.public-quote-private,
.period-public-private {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: light-dark(rgba(0, 0, 0, .58), rgba(255, 255, 255, .52));
    font-size: .66rem;
}

.invitation-theme-toggle {
    position: fixed;
    z-index: 10;
    top: 1rem;
    right: 1rem;
}