/*
 * Maps the global --hoc-accent (== --primary) onto per-module accent
 * variables so changing the brand color flows through to Mail / Calendar /
 * Messenger etc. without each module needing its own setting.
 * Fallback is HOC orange #E87A1E (var(--primary)).
 */
:root {
	--mc-accent:       var(--hoc-accent, #E87A1E);
	--cal-accent:      var(--hoc-accent, #E87A1E);
	--ms-accent:       var(--hoc-accent, #E87A1E);
	--ka-accent:       var(--hoc-accent, #E87A1E);
}

/* Branding settings tab styling */
.brd-logo-field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}
.brd-logo-field input {
	flex: 1;
}
.brd-logo-preview {
	max-height: 32px;
	max-width: 120px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	padding: 2px 6px;
	border-radius: 6px;
}
[data-theme="light"] .brd-logo-preview {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.08);
}
.brd-logo-preview-dark {
	background: #212121;
	border-color: rgba(255,255,255,0.12);
}
.hoc-settings-actions {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .hoc-settings-actions {
	border-top-color: rgba(0,0,0,0.08);
}

/* Section description paragraph between header and first setting row */
.brd-section-desc {
	margin: 0 0 1rem;
	color: var(--text-muted, #888);
	font-size: 0.85rem;
	line-height: 1.5;
}