:root {
	--kayan-logo-ring: var(--platform-logo-ring, #6d28d9);
	--kayan-logo-body: var(--platform-logo-body, #111827);
	--kayan-logo-accent: var(--platform-logo-accent, #16a34a);
}

:root[data-platform-theme="dark"] {
	--kayan-logo-ring: var(--platform-logo-ring, #8b5cf6);
	--kayan-logo-body: var(--platform-logo-body, #f8fafc);
	--kayan-logo-accent: var(--platform-logo-accent, #22c55e);
}

.kayan-logo {
	display: inline-flex;
	width: var(--kayan-logo-size, 56px);
	height: var(--kayan-logo-size, 56px);
	align-items: center;
	justify-content: center;
	overflow: visible;
	line-height: 0;
}

.kayan-logo-ring {
	fill: none;
	stroke: var(--kayan-logo-ring);
}

.kayan-logo-body-fill {
	fill: var(--kayan-logo-body);
}

.kayan-logo-surface-fill,
.kayan-logo-lock-keyhole-fill {
	fill: #ffffff;
}

.kayan-logo-gradient-stroke,
.kayan-logo-lock-gradient-stroke,
.kayan-logo-body-stroke,
.kayan-logo-accent-stroke,
.kayan-logo-lock-accent-stroke,
.kayan-logo-lock-keyhole-stroke {
	fill: none;
}

.kayan-logo-body-stroke {
	stroke: var(--kayan-logo-body);
}

.kayan-logo-accent-stroke,
.kayan-logo-lock-accent-stroke,
.kayan-logo-orbit-node-accent {
	stroke: var(--kayan-logo-accent);
}

.kayan-logo-orbit-node-primary {
	stroke: var(--kayan-logo-ring);
}

.kayan-logo-lock-keyhole-stroke {
	stroke: #ffffff;
}

.kayan-brand-mark {
	width: 4.75rem;
	height: 4.75rem;
	flex: 0 0 auto;
	filter: drop-shadow(0 12px 24px rgba(var(--platform-primary-rgb, 109, 40, 217), .18));
}